How can I position two text blocks on the same line in HTML, with one text block having a larger font size and vertically aligned in the middle, while the other text block sits lower to create a cohesive design? To better illustrate what I mean, I have created a visual example in this fiddle. https://jsfiddle.net/phzzhevq/2/
Below is the structure of the HTML code:
<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>
Accompanying CSS customization:
.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;
}
Refer to this image for a clear representation of the end result: https://i.sstatic.net/LVtlJ.png