JSFiddle - React, Tailwind, and code Playground

HTML

<div><span>Big text works</span></div>
<div><span style="font-size:.5em">Half text size works fine too</span></div>
<div><span style="font-size:.2em">Very small text doesn't align with the top of the containing box. Why does this happen?</span></div>

CSS

body {
    font-size:60px;
}
div {
    height:3em;
    width:8em;
    border:1px solid black;
    line-height:0; /* minimum line height for contained elements */
}
span {
    line-height:normal; /* don't inherit from containing block */
    background-color: #cff; /* so we can see positioning */
}