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;
}
.row{
    overflow:hidden;
}

JavaScript

function resizeFont(elemToR){
    parentW = elemToR.width();
    elemToR.find('.row').each(function(n){
        curRow = $(this);
        curWidth = curRow.width();
        var ratio =  parentW / curWidth;
        console.log(ratio);
        newFontSize = ratio * initialSize;
        curRow.css({
            'font-size': newFontSize +'px',
            'line-height' : newFontSize / 1.2 + 'px' 
            });
    });
}

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