[FIXED] How to center large font text and let small font text align bottom

Issue

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". https://jsfiddle.net/phzzhevq/2/

HTML:

<div class="my-table">  
    <div class="my-cell">
        <span class="large-text">Large text</span>
    </div> 
    <div class="my-cell">
        <span class="small-text">Small text</span>
    </div>
</div>

CSS:

.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;
}

Image that explains the desired result:

Solution

Try this little fix. Please let me know if this is what you wanted.

.my-table {
  display: table;
  height: 80px;
  background-color: red;
}

.my-cell {
  display: table-cell;
}

.large-text {
  font-size: 40px;
  line-height:80px;
}

.small-text {
  font-size: 20px;
   line-height:80px;
}

Answered By - Sree Nath

Answer Checked By - Pedro (PHPFixing Volunteer)