JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="sidebar-left"></div>
    <div class="main">
        <div class="sidebar-right"></div>
        <div class="content top"></div>
        <div class="content bottom"></div>
    </div>
</div>

CSS

.wrapper { width: auto; margin: 0 auto; } // Whatever width you want
.main { width: 75%; float: right; height: 200px; background: red; }
.sidebar-left { width: 25%; float: left; height: 200px; background: blue;}
.sidebar-right { width: 25%; float: right; height: 200px; background: green; }
.content { width: 50%; float: left; height:100px; background: purple;}
.content.bottom { background: orange; }