JSFiddle - React, Tailwind, and code Playground

HTML

<div id="good">
    <div class="alignleft _50x50 bg-red"></div>
    <div class="alignleft _50x50 bg-blue"></div>
    <div class="alignleft _50x50 bg-green"></div>
</div>
<div id="bad">
    <div class="alignleft _50x50 bg-red"></div>
    <div class="alignleft _50x50 bg-blue"></div>
    <div class="alignleft _50x50 bg-green"></div>
</div>

CSS

/* Alignment */
.alignleft {float:left;}
#good, #bad{
    clear:left;
    border:solid 1px black;
    margin: 2em;
    padding:.5em;
}
#good{display:table}       /*  <<= The trick  */
/* Colors */
.bg-red {background:#C00;}
.bg-blue {background:#009;}
.bg-green {background:#090;}

/* Dimensions */
 ._50x50 {height:50px; width:50px;}