JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <h1 id="title" class="justify-this">
        <span class="row">First row</span><br />
        <span class="row">Another row</span><br />
        <span class="row">One third and long row</span><br />
        <span class="row">The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog</span>
    </h1>
</div>

CSS

#wrapper > #title {
    width:80%;
    font-family: Helvetica, Arial, sans-serif;
    font-size:10px;
    margin:0 auto;
    color:#e3584d;
    text-shadow:0 1px 1px #fff;
    padding:0;
}

JavaScript

function resizeFont(elemToR){
   var parentW = elemToR.offsetWidth;
    
    $(elemToR).find('.row').each(function(n) {
        var newFontSize = (parentW / this.offsetWidth) * 9.9;
        
        this.style.fontSize = newFontSize + 'px';
        this.style.lineHeight = '100%';
    });
}

$(document).ready(function() {
    $('.justify-this').each(function() {
        resizeFont(this);
    });
});