JSFiddle - React, Tailwind, and code Playground

by DeadByElpy

HTML

<div class="column-group">
    <div class="column w50">Half</div>
    <div class="column w50">Half</div>
</div>
<div class="column-group">
    <div class="column w100">Full</div>
</div>
<div class="column-group">
    <div class="column w25">Half Half</div>
    <div class="column w25">Half Half</div>
    <div class="column w25">Half Half</div>
    <div class="column w25">Half Half</div>
</div>

CSS

.column-group:after {
    content: "";
    display: table;
    clear: both;
}
.column {
     float: left;
}
.w100 {
width: 100%
}
.w50{
width: 50%
}
.w33{
width: 33%
}
.w25{
width: 25%
}
.w10{
width: 10%
}
.w5{
width: 5%
}