JSFiddle - React, Tailwind, and code Playground

HTML

<header></header>
<div class="resizable"></div>
<footer></footer>

CSS

header {
    background: red;
    height: 10px;
    position: fixed;
    top: 0;
    width:100%;
}

.resizable {
    background: blue;
    width: 100%;
}

footer {
    background: red;
    bottom: 0;    
    height: 10px;
    position: fixed;
    width:100%;
}

JavaScript

$(document).ready(function(){

     var newHeight = $(window).height() - 20;
    
    $(".resizable").css("height", newHeight);
    
});