JSFiddle - React, Tailwind, and code Playground

HTML

<p>Floating columns (width 33.3%)</p>
<div class="grid cf">
    <div class="grid__item">Test</div>
    <div class="grid__item">Test</div>
    <div class="grid__item">Test</div>
</div>
<p>Inline Block columns (width 33.3%)</p>
<div class="grid grid--inlineblock">
    <div class="grid__item">Test</div>
    <div class="grid__item">Test</div>
    <div class="grid__item">Test</div>
</div>

CSS

.grid {
    margin-bottom: 20px;
}
    .grid__item {
        float: left;
        width: 33.3%;  
        background: red;
    }
    .grid--inlineblock .grid__item {
        float: none;
        display: inline-block;
    }

/* CLEARFIX FOR FLOAT */
.cf:before,
.cf:after {
    content: " ";
    display: table; 
}
.cf:after { 
    clear: both;
}