JSFiddle - React, Tailwind, and code Playground

by spicyj

HTML

A
<span class="supsub">
    <span class="sup">
        <span><span>long world</span></span>
    </span>
    <span class="sub">
        <span><span>hello</span></span>
    </span>
</span>
B

CSS

body {
    font-size: 50px;
}

.supsub {
    display: inline-table;
    vertical-align: top
}

.sup, .sub {
    display: table-row;
    vertical-align: inherit;
}

.sup > span, .sub > span {
    display: table-cell;
    vertical-align: inherit;
}

.sup > span > span, .sub > span > span {
    display: block;
    height: 0;
}