title: How to center large font text and let small font text align bottom
body: <p>I want to have two text blocks on the same row, where the text with larger font is vertically aligned middle and the text with smaller font has the same text baseline as the one with larger font.
  Look at my fiddle where the large text is centered as desired. The smaller text though is also centered, but I want it to be a bit lower so that it feels like the two text blocks are on the same "line".
  <a href="https://jsfiddle.net/phzzhevq/2/" rel="nofollow noreferrer">https://jsfiddle.net/phzzhevq/2/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="my-table"&gt;  
      &lt;div class="my-cell"&gt;
          &lt;span class="large-text"&gt;Large text&lt;/span&gt;
      &lt;/div&gt; 
      &lt;div class="my-cell"&gt;
          &lt;span class="small-text"&gt;Small text&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.my-table {
      display: table;
      height: 80px;
      background-color: red;
  }
  
  .my-cell {
      display: table-cell;
      vertical-align: middle;
  }
  
  .large-text {
      font-size: 40px;
  }
  
  .small-text {
      font-size: 20px;
  }
  </code></pre>
  
  <p>Image that explains the desired result:
  <a href="https://i.stack.imgur.com/LVtlJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LVtlJ.png" alt="Desired result"></a></p>