JSFiddle - React, Tailwind, and code Playground

HTML

<!--[IF IE]>
<style>
#leftCo {
    height:calc(100% - 80px);
}
</style>
<!--<![endif]-->
<div id="header">Header</div>
<div id="content">
    <div id="coWrapper">
        <div id="leftCo">Left Bar</div>
        <div id="rightCo">Content</div>
    </div>
</div>
<div id="footer">Footer</div>

CSS

* {
    margin:0;
    padding:0;
}

html,
body {
   width: 100%;
   height:100%;
    
}

body {
    display: table;
}

#header, #content, #footer {
    display: table-row;
    width: 100%;
}

#header {
    background: yellow;
    height: 30px;
}

#content {
    background: pink;
}

#footer {
    background: green;
    height: 50px;
}

#coWrapper {
    display:table-cell;
    width:100%;
    height:100%;
    position:relative;
}

#leftCo, #rightCo {
    display: block;
}

#leftCo {
    background: blue;
    width: 200px;
    float:left;
    height:100%;
}