JSFiddle - React, Tailwind, and code Playground

HTML

<h3>current state of affairs</h3>
<div id="container">
    <div id="one">one</div>
    <div id="two">two</div>
    <div id="thr">thr</div>
    <div id="fou">fou</div>
    <div id="fiv">fiv</div>
    <div style="clear: both"></div>
</div>

<h3>ideally...</h3>
<div id="container">
    <div id="one">one</div>
    <div id="two">two</div>
    <div id="thr">thr</div>
    <div id="fou">fou</div>
    <div id="fiv" style="clear: left">fiv</div>
    <div id="six">six</div>
    <div style="clear: both"></div>
</div>

CSS

#container { 
   background: #42a850;
   width: 500px;   
}

#one, #two, #thr, #fou, #fiv, #six, #sev, #eig {
    background: #75c07f;
    border: 1px dashed #333;
    float: left;
    width: 100px;
}

#one { height: 200px; }
#two { height: 300px; }
#thr { height: 200px; }
#fou { height: 100px; }
#fiv { height: 300px; }
#six { height: 150px; }