JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid_6">
grid 6
</div>
<div class="grid_6">
grid 6
</div>
<div class="grid_1">
grid 1
</div>
<div class="grid_2">
grid 2
</div>
<div class="grid_4">
grid 4
</div>
<div class="grid_5">
grid 5
</div>

CSS

[class^=grid_]{
    float:left;
    margin-left:1%;
    margin-right:1%;
    margin-bottom:5px;
    background-color:red;
}
.grid_1 {
    width:6.333%;
}
.grid_2{
    width:14.666%
}
.grid_4{
    width:31.333%
}
.grid_5{
     width:39.666%;
 }
.grid_6{
    width:48%;
}