JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div>
        <div class="dv">
            <input class="inpt" id="cbx" type="checkbox">
            <label class="lbl" for="cbx">CHEMISTRY</label>
            <span class="spn">60% Known</span>
        </div>
    </div>
</body>

CSS

.lbl {font-size: 200%}
        .spn {padding-left: 5%}
        .dv {border-style: solid; width: 350px; height: 60px;}
        .lbl, .spn, .lbl {vertical-align: middle;}