JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <h1 class="textFill">Make this fit as large as possible in the container</h1>
</div>

CSS

#container {
  width: 80%;
  height: 300px;
  border: 1px solid blue;
}

h1 {
  background: yellow;
}

JavaScript

textFill();

$(window).resize(textFill);

function textFill() {
  var tf= $('.textFill');
  for(var i = 1 ; ; i++) {
    tf.css('font-size', i);
    if(tf.outerHeight(true) > tf.parent().innerHeight() ||
       tf[0].scrollWidth    > tf.width()
      ) {
      break;
    }
  }

  tf.css('font-size', i-1);
}