JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="main">#main</div>
    <aside id="left">#left</aside>
    <aside id="right">#right</aside>
</div>

CSS

body {
    margin:0;
    font-family:sans-serif;
    font-weight:300;
    line-height:80px;
    text-align:center;
}

#main, #left, #right {
    float:left;
    position:relative;
    min-height:400px;
}

#main {
    left:16.6666%; /* width of #left */
    width:66.6666%;
    background:#F0FAFF;
}

#left {
    left:-66.6666%; /* width of #main */
    width:16.6666%;
    background:#75D1FF;
}

#right {
    width:16.6666%;
    background:#66CCFF;
}

#container:after {
    clear:both;
    display:block;
    content:"";
}

@media only screen and (max-width:480px) {
     
    #main, #left, #right {
        width:auto;
        left:auto;
        float:none;
    }
}