JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">
</div>
<div class="site">
    <div class="container">
    </div>
</div>

CSS

html, body {
    font-family: Tahoma;
    height:100%;
}

.header {
    background-color: #49c98e;
    width: 100%;
    height: 50px;
}

.site {
    padding: 1.5em 0;
    height:100%;
}

.container {
    background-color: #c7c7c7;
    width: 80%;
    margin: 0 auto;
    position: relative;
    height:50%;
}

JavaScript

function calculateResponsiveWidth() {
    $realWidth = $(".container").width() - $(".right-sidebar").outerWidth(),
    $containerContent = $(".left-content");

    $containerContent.css({
        "width": $realWidth
    });
}

$(window).on("resize", function () {
    calculateResponsiveWidth();
});

calculateResponsiveWidth();

var newHeight = $(window).height() - 50;
newHeight = newHeight + 'px';
$('.site').css('height',newHeight);