JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>On load, font size is set depending on length of title.</li>
    <li>However, I want this to be reactive...</li>
    <li>Change the length of Title and hit run</li>
<ul>
    <br/><br/>
<div class="maxwidth-container">    
    <span id="title">TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST</span>
</div>

CSS

#title {
    white-space: nowrap;
    display: inline-block;
    transform-origin: 0% 100%; /* set transform origin to bottom left corner of the title element */
}

.maxwidth-container {
    width: 400px;
    background-color: #DDD;
    overflow: visible;
}

JavaScript

$(function() {

    var $title = $("#title");
    var maxWidth = $(".maxwidth-container").width();
    
    if ($title.width() > maxWidth) {
       var scaleAmt = maxWidth / $title.width();
       $title.css("transform" , "scale(" + scaleAmt + "," + scaleAmt + ")");
    }
    
});