JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<div class="g-group">
    <div class="g-block4">asd</div>
    <div class="g-block8">
        <div class="g-block4">sda</div>
        <div class="g-block8">das</div>
    </div>
</div>

<div class="b"></div>

CSS

* {
    box-sizing: border-box;
}

.g-group   { overflow: auto;}
*[class^="g-block"] { float: left; }
.g-block1  { width: 8.33333333333%; }
.g-block2  { width: 16.6666666667%; }
.g-block3  { width: 25%; }
.g-block4  { width: 33.3333333333%; }
.g-block5  { width: 41.6666666667%; }
.g-block6  { width: 50%; }
.g-block7  { width: 58.3333333333%; }
.g-block8  { width: 66.6666666667%; }
.g-block9  { width: 75%; }
.g-block10 { width: 83.3333333333%; }
.g-block11 { width: 91.6666666667%; }
.g-block12 { width: 100%; }

JavaScript

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa