JSFiddle - React, Tailwind, and code Playground

by Ken Z

HTML

<div id="headerwrap">
    <div id="header">header</div>
</div>
<div id="navigationwrap">
    <div id="navigation">navigation</div>
</div>
<div id="midcontentwrap">
    <div id="leftwrap">
        <div id="left">left</div>
    </div>
    <div id="midwrap">
        <div id="midleft">midleft</div>
        <div id="midright">midright</div>
    </div>
    <div id="rightwrap">
        <div id="right">right</div>
    </div>
</div>

CSS

#midcontentwrap {
    min-width: 500px;
}

#leftwrap, #midwrap, #rightwrap {
    float: left;
    min-height: 400px;
}

#leftwrap, #rightwrap {
    min-width: 100px;
    width: 25%;
    background-color: #15a;
}

#midwrap {
    width: 50%;
    background-color: #45a
}

#midleft, #midright {
    width: 50%;
    float: left;
}

#midleft {
    background-color: #a45;
}
#midright {
    background-color: #4a5;
}

@media all and (max-width: 500px) {
    #midleft, #midright {
        width: 100%;
    }
}