JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
    <div class="superscripts">
        <sup class="sup-left">16</sup>
        <sup class="sup-right">8</sup>
    </div>
    <div class="element"><abbr>O</abbr><br /> Oxygen</div>
    <div class="subscripts">
        <sub class="sub-left">16.00</sub>
        <sub class="sub-right">(6)</sub>
    </div>
</div>

CSS

.box {
    width: 100px;
    height: 100px;
    border: 2px solid black;
}

.element {
    text-align: center;
    clear: both;
    height: 60px;
}

.element abbr {
    font-size: 28px;
    font-weight: bold;
}

.superscripts,
.subscripts {
    height: 18px;
}


.superscripts .sup-left {
    float: left;
    padding: 2px 0 0 2px;
}

.superscripts .sup-right {
    text-align: right;
    float: right;
    padding: 2px 2px 0 0;
}
.subscripts .sub-left {
    float: left;
    padding: 4px 0 2px 2px;
}

.subscripts .sub-right {
    text-align: right;
    float: right;
    padding: 4px 2px 2px 0;
}