Align list items by their bounding rect - html

Question

I have a list that uses display: inline-flex. The font-sizes of different items in the list are different. I discover that the list items are aligned according to the position of the bottom of the text. This makes the items with the smaller text sizes to appear lower than the others.
However, I want to align the items by the base of their bounding rects.
I have have found a hack to resolve this: I place a span containing a dot either side of the text I want to show, I set the font-size of this dot to size of the largest font-size in the list, and I set the visibility of these spans to hidden.
Is there a non-hacky, pure CSS way to achieve this?
JSFiddle
body {
margin: 0;
}
ul {
padding: 0;
margin: 0;
}
li {
display: inline-flex;
border: 1px solid #000;
justify-content: center;
align-items: center;
width: 64px;
height: 64px;
font-size: 64px;
line-height: 64px;
}
li:last-child {
font-size: 16px;
}
span {
font-size: 64px;
visibility: hidden;
}
hr {
position: absolute;
top: 47px;
width: 204px;
}
<ul>
<li>1</li>
<li>2</li>
<li>THREE</li>
</ul>
<hr>
<ul>
<li>1</li>
<li>2</li>
<li><span>.</span>THREE<span>.</span></li>
</ul>

Answer 1

You can achieve the alignment you want by adding display: flex to the container, in this case the ul element.
fiddle
body {
margin: 0;
}
ul {
padding: 0;
margin: 0;
display: flex;
}
li {
display: inline-flex;
border: 1px solid #000;
justify-content: center;
align-items: center;
width: 64px;
height: 64px;
font-size: 64px;
line-height: 64px;
}
li:last-child {
font-size: 16px;
}
<ul>
<li>1</li>
<li>2</li>
<li>THREE</li>
</ul>