JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Solution two: <i>display:table</i></h1>
<div class="parent">
    <div class="float">without table</div>
    <div class="float"></div>
</div>

<div class="parent display-table">
    <div class="float">with table</div>
    <div class="float"></div>
</div>

CSS

.parent{
    border:1px solid red;
    margin-top:20px;
    margin-bottom:150px
}

.display-table{
    display:table;
    zoom:1;
    width:100%;
    *width:auto;
}

.float{
    height:100px;
    width:100px;
    border:1px solid blue;
    float:left;
}

.clear{
    clear:both;
}