JSFiddle - React, Tailwind, and code Playground

HTML

<div class="a">
    <span class="b"></span>
    <span class="c"></span>
</div>
<hr>
<div class="aa">
    <span class="bb"></span>
    <span class="cc"></span>
</div>

CSS

.a {height: 50px; overflow: hidden}
.b {float: left; background: red; width: 150px}
.c {float: right}

.aa {height: 50px; overflow: hidden}
.bb {float: left; background: red; width: 150px; height: 36px}
.cc {float: right}