There is an interesting answer on Stack Overflow that addresses how to vertically align text of different sizes. However, a user in the comments pointed out an issue with floating the second span element to the right and requested help on making it work. You can view the example from the comments here:
Here is the HTML code snippet provided:
<title>Untitled Document</title>
<body>
<div>
<span>100</span>
<span>This is the desc</span>
</div>
And here is the corresponding CSS code snippet:
div {
display:table-cell;
vertical-align:middle;
text-align:center;
height:200px;
width:300px;
margin:auto;
background:red;
border:1px solid #f00;
font-size: 40px;
}
span {
display:inline-block;
vertical-align:middle;
padding:0 10px;
}
span + span {
font-size:50%; float: right;
}
I encountered the same issue myself and would like to pose it as a new question, given that the original one has already been answered without addressing this specific scenario.