JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="top">
        <div id="left">
            Left
        </div>
        <div id="middle">
            Middle
            <p>Lorem ipsum…</p>
        </div>
        <div id="right">
            Right
        </div>
    </div>
</div>
<div id="footer">
    Footer
</div>

SCSS

#container {
    display: table;
    width: 100%;
    table-layout: fixed;
    > div {
        display: table-row;
        > div {
            display: table-cell;
        }
    }
}
#middle {
    width: 300px;
    background: blue;
}
#left {
    background: red;
}
#right {
    background: green;
}
#footer {
    background: orange;
}