title: Line up badges of different sizes
body: <p>I have several badges representing users. Some users have photos (<code>display: block</code>) and others are simply text (<code>display: inline</code>).</p>
  
  <p><a href="https://i.stack.imgur.com/BtDgo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BtDgo.png" alt="enter image description here"></a></p>
  
  <p>For the container we have:</p>
  
  <pre><code>&lt;div class="align-self-center"&gt;
  </code></pre>
  
  <p>And each item is like:</p>
  
  <pre><code>&lt;div style="height:30px" class=" pl-0 pt-0 pb-0 mr-1 mt-1 badge badge-danger"&gt;
    &lt;span class="p-1"&gt;PMT&lt;/span&gt;
    &lt;span class="align-self-center"&gt;46h &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>As is, it seems like this approach is over-engineered and still it is not working.</p>
  
  <p>Please advise how we can correctly align all items vertically.</p>
  
  <p>CODEPEN: <a href="https://codepen.io/anon/pen/EbYJyd?editors=1100#0" rel="nofollow noreferrer">https://codepen.io/anon/pen/EbYJyd?editors=1100#0</a></p>