JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class='container-fluid'>
    <div class='row'>
        <div class='col-md-12' id='headerContent'>
        </div>
    </div>
    <div class='row full-height'>
        <div class='col-md-6 full-height' id='events'></div>
        <div class='col-md-6 full-height' id='archive'></div>
    </div>
</div>

CSS

html, body {
    height: 100%;
}

#headerContent { 
    background-color: red;
    height: 45px;
}

.full-height {height: 100%; background-color: #ddd; }

.col-md-6 {
    width: 50%;
    float: left;
}

#archive {
    background-color: #666;
}
}

JavaScript

$(function() {
    var full_height = $('body').height() - $('#headerContent').height();
    $('.full-height').height(full_height);
});