JSFiddle - React, Tailwind, and code Playground

by MarmiK

HTML

<div class="btn-order">
    <span class="a"> top </span>
    <span class="b"> Middle </span>
    <span class="c"> bottom </span>
    <span class="d"> No Alignment </span>
</div>

CSS

.btn-order{
    background:yellow;
    width:auto;
    font-size:24px;
    padding:0;margin:0;
    height:26px;
}
.a,.b,.c,.d{font-size:11px; line-height:26px;color:blue;padding:0;margin:0;text-transform:uppercase;}
.a { vertical-align:top; }
.b { vertical-align:middle; }
.c { vertical-align:bottom; }
.d {color:black }