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>