align 3-part menu item with css

Question

I am building a menu of so called channels. Each menu item has 3 parts.

first has a hash sign representing a channel, secondly a channel name, and lastly a number, representing the number of posts in said channel.

I have the below code, but wonder what is the best way to align the first div, the hash sign, to the very left, the number div, to the very right, and the channel name div, to take up the remaining space in between.

and finally, how it vertically center the 3 div's within each container div so it looks nice as they will have different font sizes.

(doesn't have to be divs, can be spans, table cells etc if that would help)

div{
  display:inline-block;
}
.item{
  background-color:#000;
  color:#fff;
  width:100%;
  font-size:20px;
  padding:4px;
}
.hash{
  background-color:orange;
  font-size:14px;
}
.name{
  background-color:tomato;
}
.count{
  background-color:dodgerblue;
  font-size:14px;
}

<div class="item">
  <div class="hash">
    #
  </div>
  <div class="name">
    channel name
  </div>
  <div class="count">
    226
  </div>
</div>