JSFiddle - React, Tailwind, and code Playground

HTML

<div id="title" class="fullwidth background">Title</div>

<div id="main" class="fullwidth cf">
    <div id="Panel0" class="onethird background">Title</div>
    <div id="Panel1"class="onethird background">Title</div>
    <div id="Panel2"class="onethird background">Title</div>
</div>

<div id="Panel3" class="fullwidth background">Title</div>

CSS

.background {    /* To make it easier to calculate widths */
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */ 
    
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px; 
    background: #4d85bb;
    border: 2px solid #376089;
    color: white;
}
.fullwidth {width: 100%;}
.onethird {width: 33%; margin-right: 0.5%; height: 100%; float: left;}
.onethird:last-child {margin-right: 0;}

#title {height: 2em; margin-bottom: 0.25em;}
#Panel3 {margin: 0.25em 0 0 0;}


div {font-size: 16px; text-align: center; }









/* Helper classes */
/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}

JavaScript

function resizethem(fixed_element, main_section, bottom_section) {
    var bottom_section_ratio = 15 / 100; //Sets the ratio for the bottom section

    var window_height = $(window).innerHeight(),
        fixed_element_height = fixed_element.outerHeight(),
        bottom_margin = bottom_section.outerHeight() - bottom_section.innerHeight(),
        bottom_height = Math.floor( window_height * bottom_section_ratio),

        mid_height = window_height - fixed_element_height - bottom_height - bottom_margin;

    main_section.css('height', mid_height + 'px');
    bottom_section.css('height', bottom_height - bottom_margin + 'px');

    console.log(fixed_element_height, bottom_margin, bottom_height, window_height);
}


$(document).ready(function() {

    resizethem($('#title'), $('#main'), $('#Panel3'));

    $(window).resize(function() {
        resizethem($('#title'), $('#main'), $('#Panel3'));
    });

});