JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container" class="clearfix">
    <div id="firstChild">
    </div>
    
    <div id="secondChild">
    </div>
</div>

CSS

#container{ padding:10px; background:yellow}
#firstChild{ width:50px; height:50px; float:left; margin:5px; background:red; }
#secondChild{ width:50px; height:50px; float:right; margin:5px; background:blue; }

.clearfix:after {
   content: ".";
   display: block;
   clear: both;
   visibility: hidden;
   line-height: 0;
   height: 0;
}
 
.clearfix {
   display: inline-block;
}
 
html[xmlns] .clearfix {
   display: block;
}
 
* html .clearfix {
   height: 1%;
   overflow: visible;
}