JSFiddle - React, Tailwind, and code Playground

HTML

<DIV>
    <P>
         <SPAN CLASS="fitin">Short Guy</SPAN>
    </P>
</DIV>
<DIV>
    <P>
         <SPAN CLASS="fitin">Just A Random Regular Person</SPAN>
    </P>
</DIV>
<DIV>
    <P>
         <SPAN CLASS="fitin">A Really Very Extraordinarily Long And Tall Woman</SPAN>
    </P>
</DIV>

CSS

DIV
{
    width: 227px;
    height: 27px;
    overflow: hidden;
    margin-bottom: 9px;
    background-color: silver;
}

P
{
    margin: 0px;
    color: black;
    font-size: 20px;
    text-align: center;
    white-space: nowrap;
}

JavaScript

function fittext()
{
    var maxW = 227, maxH = 27, maxSize = 20;
    var c = document.getElementsByClassName("fitin");
    var d = document.createElement("span");
    d.style.fontSize = maxSize + "px";

    for (var i = 0; i < c.length; i++)
    {
        d.innerHTML = c[i].innerHTML;
        document.body.appendChild(d);
        var w = d.offsetWidth;
        var h = d.offsetHeight;
        document.body.removeChild(d);
        var x = w > maxW ? maxW / w : 1;
        var y = h > maxH ? maxH / h : 1;
        var r = Math.min(x, y) * maxSize;
        c[i].style.fontSize = r + "px";
    }
}

fittext();