JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="top">
        <div id="topleft">Left 300px</div>
        <div id="topright">Right takes up rest of space</div>
    </div>
    <div id="middle">
        <div id="middleleft">Left 300px</div>
        <div id="middleight">Right takes up rest of space</div>
    </div>
    <div id="bottom">
        <div id="bottomleft">Left 300px</div>
        <div id="botomright">Right takes up rest of space</div>
    </div>
</div>

CSS

#wrapper, #top, #bottom, #middle {
    display: table;
    width: 100%;
}
#topleft, #topright, #bottomleft, #bottomright {
    display: table-cell;
    height: 39px;
    color: white;
}

#topleft {
    background: blue;
    width: 300px;
}
#topright {
    background: red;
}

#middleleft {
    background: blue;
    width: 300px;
    height: 500px;
}
#middleright {
    background: red;
    height: 500px;
}


#bottomleft {
    background: blue;
    width: 300px;
}
#bottomright {
    background: red;
}