title: How to position text on a baseline?
body: <p><kbd><a href="http://jsbin.com/diyirenajaku/1/edit" rel="noreferrer"><strong>PLAYGROUND HERE</strong></a></kbd></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="first"&gt;Hello g World&lt;/div&gt;
  &lt;div class="second"&gt;Hello g World&lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>div {
    background-color: rgba(255, 0, 0, 0.3); /* For visualization only */
    margin-top: 50px;                       /* For visualization only */
    height: 20px;                           /* This is fixed! */
  }
  
  .first {
    font-size: 16px;                        /* This can change */
  }
  
  .second {
    font-size: 30px;                        /* This can change */
  }
  </code></pre>
  
  <p>Result:</p>
  
  <p><img src="https://i.stack.imgur.com/MvlVi.png" alt="enter image description here"></p>
  
  <p>How would you position the text such that its baseline (the bottom of "Hello") is aligned with the bottom of the pink box, i.e.:</p>
  
  <p><img src="https://i.stack.imgur.com/pd3b7.png" alt="enter image description here"></p>
  
  <p>Is there a way to achieve this regardless of the <code>font-size</code>?</p>
  
  <p><kbd><a href="http://jsbin.com/diyirenajaku/1/edit" rel="noreferrer"><strong>PLAYGROUND HERE</strong></a></kbd></p>