JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="grid_1">
        left
    </div>
            <div class="grid_2">
        the content
    </div>
    <div class="grid_3">
        right
    </div>

</div>

CSS

[class^=grid_]{
    float:left
}
.grid_1{
    float: left;
    width:50px;
    background-color:red;
}
.grid_2{
}
.grid_3{
    float: right;
    width:50px;
    background:red;
}