JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

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

.textFill {
    display: inline;
}

JavaScript

textFill();

   function textFill() {
  $(".textFill").each(function() {
  var
    $text = $(this),
    $parent = $text.parent();

  var
    parentW = $parent.width(),
    parentH = $parent.height();
      
  var minFontSize = 1;
  var maxFontSize = parentH;
      
  for (var loop = 0; loop < 25; ++loop)
  {
      var newFontSize = (minFontSize + maxFontSize) / 2;
      $text.css("font-size", newFontSize);
      var textW = $text.width(),
      var textH = $text.height(),

      if (textW > parentW || textH > parentH)
      {
          maxFontSize = newFontSize;
      }
      else
      {
          minFontSize = newFontSize;
      }
  }

  $text.css("font-size", minFontSize);
}