JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">1</div>
<div id="wrap">
    <div id="sidebar">
        <div id="left-nav">2</div>
        <div id="someid">3</div>
    </div>
    <div id="main"> 4
        <p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Curabitur blandit tempus porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
        <p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Curabitur blandit tempus porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
                <p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Curabitur blandit tempus porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
        <p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Curabitur blandit tempus porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
               ...

CSS

#header {
    color: #eee;
    background-color: #111;
    height: 100px;
}

#wrap {
    background: url('http://placehold.it/300x150/666666/666666') repeat-y, 
                url('http://placehold.it/750x750/cccccc/cccccc') 300px 0;
    overflow: auto;
    background-color: #666;     /* Sidebar color fallback for < ie8 */
}
#sidebar {
    float: left;
    width: 300px;
}

#main {
    margin-left: 300px;        /* Width of sidebar */
    background-color: #ccc;    /* fallback for < ie8 */
 
    /* NOTE: Multiple images will not work < ie8
       If the content color will not expand 100% height
       in < ie 8. The sidebar color will show below the
       sidebar if the content is TALLER than the content. */
}

/* Unimportant styling */
#left-nav{
    height: 130px; /* Just used to give div some height, this height can be dynamic */
}

#header, #left-nav, #someid, #main {
    padding: 0.5em;
}
html, body {
    margin: 0;
    padding: 0;
}
div:first-line {
    font-size: 2em;
    font-weight: bold;
}
p {
    margin-top: 0;
}