JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <h1 class="textFill">Make this fitasdf asdfasdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdfasd fasdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf </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 * ratio;
    
          $text.css("font-size", newSize);
    
        });    
      }