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();

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

  var
    textW = $text.width(),
    textH = $text.height(),
    parentW = $parent.width(),
    parentH = $parent.height(),
    ratio = (parentW + parentH) / (textW + textH);

  var
    originalSize = parseFloat($text.css('font-size')),
    newSize = originalSize * (.9 * ratio);
    
    $text.css("font-size", newSize);

  });    
}