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: 400px;
    height: 300px;
    border: 1px solid blue;
}

JavaScript

textFill();

    
    $(window).resize(textFill);
    
    function textFill() {
        $(".textFill").each(function() {
          var
            $text = $(this),
            $parent = $text.parent();
    
          var
            textW = $text.width(),
            parentW = $parent.width(),
            ratio = parentW / textW;
    
          var
            originalSize = parseFloat($text.css('font-size')),
            newSize = originalSize * ratio;
    
          $text.css("font-size", newSize);
    
        });    
      }