properly center text in span elements horizontally

Question

I have the following code, but I can not align the different span elements within my container so it looks correctly.

here is an image with what I'm trying to achieve: https://ibb.co/f2sy5YY

.container{
  font-weight:bold;
  font-size:10px;
  display:inline-block;
  position:relative;
  width:100%;
}
.hash{
  color:dodgerblue;
}
.text{
  font-size:24px;
}
.numbers{
  background-color:dodgerblue;
  color:#ffffff;
  border-radius:4px;
  padding:2px;
}

<div class="container">
  <span class="hash">#</span>
  <span class="text">hello</span>
  <span class="numbers">14</span>
</div>