JSFiddle - React, Tailwind, and code Playground
HTML
Floats are not supposed to overlap
<div style="width: 100px; height: 100px; border: solid black 1px;">
<div style="float: right; width: 50px; height: 300px; background-color: green;"></div>
<div style="width: 40px; height: 10px;">
X<div style="float: left; width: 125px; height: 10px; background: blue"></div>
</div>
</div>