JSFiddle - React, Tailwind, and code Playground

HTML

<div id="a">left, left, left, left div</div>
<div id="b">right, right, right, right div</div>
<div style="clear: both;"></div>
<hr>
This is how I want it to look alike, when the 2 divs above gets enforced to different lines:
<div id="a2">left, left, left, left div</div>
<div id="b2">right, right, right, right div</div>

CSS

#a
{
    background-color: red;
    float: left;
}

#b
{
    background-color: green;
    float: right;
}

#a2
{
    background-color: red;
}

#b2
{
    background-color: green;
}