JSFiddle - React, Tailwind, and code Playground

by Kishore Sahasranaman

HTML

<div class="container">
    <div class="left">
        <!-- sub divs -->
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
    </div>
    <div class="center">
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <!-- some random number of sub divs -->
    </div>
    <div class="right">
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <!-- sub divs here -->
    </div>
</div>

CSS

html, body {
    height : 100%;
}
.container {
    width :80%;
    height : 100%;
}
.center{
    width : 48%;
    background: gray;
    height : auto;
    margin-left : 1%;
    float: left
}
.left, .right {
    width :23%;
    background: gray;
    height : auto;
    margin-left : 1%;
    float: left
}
.content {
    height : 100px;
}