JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <div id="container">
        <div id="header">
            Header
        </div>
        <div id="sub-header">
          Content
        </div>
        <div id="drilling" style="margin-left: 370px;display:none;">
            Drill Rigs Parts & Tooling Grout Plants
        </div>
        <div id="concrete" style="margin-left: 500px;display:none;">
            Pumps Parts System/Pipe
        </div>
        <div id="sidebar-left">
            Sidebar
        </div>
        <div id="content">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam a velit a libero condimentum posuere. Cras sit amet placerat est. Praesent vulputate dictum lacus, sed viverra sapien blandit eu. Etiam vehicula ipsum rhoncus diam aliquet posuere. Donec tempus maximus ipsum, vel dictum sapien interdum a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed rutrum dolor at dui bibendum, at aliquet dolor maximus.</p>
          <p>Phasellus id turpis id ligula auctor pharetra. Nunc id diam posuere, tincidunt augue vel, tincidunt enim. Mauris at interdum ipsum. Suspendisse porta tincidunt mauris non imperdiet. Vivamus at porttitor turpis, vulputate placerat mauris. Vivamus bibendum nunc vitae justo tempor, sit amet cursus erat dignissim. Aliquam vulputate urna eget pulvinar vehicula.</p>
          <p>Suspendisse sed luctus est, vel lobortis ex. Quisque laoreet, massa ac vulputate malesuada, elit nisi placerat dui, sed viverra turpis sapien quis mi. Integer sed efficitur turpis. Praesent cursus cursus semper. Cras lobortis libero quis risus blandit blandit. Quisque scelerisque consequat ipsum sit amet bibendum. Suspendisse nisi odio, blandit et tincidunt vitae, faucibus non tortor. Suspendisse pulvinar dui lectus, eget vehicula ligula sagittis at. Sed sit amet sapien orci. Integer semper, tortor nec ultrices rhoncus, leo sem vulputate...

CSS

body {
    width: auto;
    margin-left: 0px;
    margin-right: 0px;
    font-family: Verdana;
    font-size: 14px;
    background-color: black;
}

h1, p {
    margin: 10px;
}

h1 {
    font-size: 16px;
}

#container {
    width: 1220px;
    margin-left: auto;
    margin-right: auto;
    background-color: red;
    height: 100%;
}

#sidebar-left {
    float: left;
    background-color: black;
    width: 180px;
    margin-left: 10px;
    text-align: center;
    height: 100%;
    position: relative;
    display: table-cell;
    vertical-align: middle;
}

#content {
    float: left;
    background-color: white;
    width: 840px;
    height: 100%;
    position: relative;
    padding: 0px;
    /*background-image: url('../images/yard.jpg');
    background-repeat: no-repeat;*/
}

#sidebar-right {
    float: left;
    background-color: black;
    width: 180px;
    text-align: center;
    height: 100%;
    position: relative;
    display: table-cell;
    vertical-align: middle;
}

#footer {
    clear: both;
    text-align: center;
    color: #ffffff;
    font-size:12px;
}

#sub-header {
    text-align: center;
    padding: 6px;
    font-weight:bold;
        font-size: 16px;
}

#header {
    text-align: center;
}

.links {
    color: white;
    text-align: center;
    padding-left: 16px;
    padding-right: 16px;
    text-decoration: none;
}

.footerLinks {
    color: white;
    text-align: center;
    text-decoration: none;
}

.logos {
    padding: 10px;
    padding-bottom: 40px;
}

JavaScript

$(document).ready(function () {
    setDivAttributes();
});

function setDivAttributes() {
    $("#sidebar-left").height($("#content").height());
    $("#sidebar-right").height($("#content").height());
}