JSFiddle - React, Tailwind, and code Playground

HTML

<p style="font-family:Times New Roman">
    No vertical align: test<sup>2</sup>
</p>
<p style="font-family:Verdana">
    No vertical align: test<sup>2</sup>
</p>
<p style="font-family:Verdana;vertical-align:top">
    Vertical top: test<sup>2</sup>
</p>
<p style="font-family:Verdana;vertical-align:top">
    Entity: test&sup2;
</p>
<p style="font-family:Verdana;vertical-align:top">
    Span: test<span style="font-size:.7em;position: relative;top:-0.5em;">2</span>
</p>
<p style="font-family:Verdana;vertical-align:top">
    Sup (CSS reset): test<sup style="font-size:.7em;position: relative;top:-0.5em;vertical-align:baseline;">2</sup>
</p>