JSFiddle - React, Tailwind, and code Playground

HTML

<h2>The pseudo is IN element</h2>
<div id="test1">test</div>

<hr />

<h2>Clearfix</h2>
<div id="test2" class="clearfix">
    <div>test</div>
    <div>test</div>
    <div>test</div>    
</div>

<hr />

<h2>Clearfix with 0 height</h2>
<div id="test3" class="clearfix">
    <div>test</div>
    <div>test</div>
    <div>test</div>    
</div>

CSS

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     line-height: 0;
     content: " ";
     clear: both;
     height: 0;
     width: 0;
     }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }


#test1 { border: 1px solid #000; margin: 20px 0;}
    #test1:after { content: 'test2'; background: #ccc; }

#test2 { margin: 20px 0; }
    #test2 div { display: inline; float: left; }

#test3 { height: 0; margin: 20px 0; overflow: hidden; }