JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">
  <h1>
    HEADER1<br>HEADER2
  </h1>
</div>
<div id="box" style="background-color:yellow">
  stretch to right and bottom
</div>

JavaScript

function registerResize(f) {
  $(window).resize(function() {
    clearTimeout(this.resizeTimeout);
    this.resizeTimeout = setTimeout(function() {
      var oldOverflow = document.body.style.overflow;
      document.body.style.overflow = "hidden";
      var currHeight = $(window).height(),
          currWidth = $(window).width();
      document.body.style.overflow = oldOverflow;

      var prevUndefined = (typeof this.prevHeight === 'undefined' || typeof this.prevWidth === 'undefined');
      if (prevUndefined || this.prevHeight !== currHeight || this.prevWidth !== currWidth) {
        //console.log('Window size ' + (prevUndefined ? '' : this.prevHeight + "," + this.prevWidth) + " -> " + currHeight + "," + currWidth);
        this.prevHeight = currHeight;
        this.prevWidth = currWidth;

        f(currHeight, currWidth);
      }
    }, 200);
  });
  $(window).resize(); // initialize
}

registerResize(function(height, width) {
	$('#box').height(height-$('#header').height()-50);
	$('#box').width(width-30);
});