JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer cf">
    <h1>Clearfix test</h1>
    <div class="inner inner-1"></div>
    <div class="inner inner-2"></div>
</div>

CSS

.outer {
    width:500px;
    margin:20px auto;
    background:#eee;
}

.inner {
    float:left;
    width:48%;
    height:200px;
    background:#ddd;
}

.inner-2 {
    float:right;
}

.cf:before,
.cf:after {
    content:"";
    display:block;
    height:0;
    overflow:hidden;
}

.cf:after {
    clear:both;
}

.cf {
    zoom:1;
}