JSFiddle - React, Tailwind, and code Playground

HTML

<div class='jtextfill'><span>Now is a good time to party!</span></div>
<div class='jtextfill'><span>Now is a good time to party!</span></div>
<div class='jtextfill'><span>Now is a good time to party!</span></div>
<div class='jtextfill'><span>Now is a good time to party!</span></div>
<div class='jtextfill'><span>Now is a good time to party!</span></div>
<div class='jtextfill'><span>Now is a good time to party!</span></div>
<div class='jtextfill'><span>Now is a good time to party!</span></div>
<div class='jtextfill'><span>Now is a good time to party!</span></div>
<div class='jtextfill'><span>Now is a good time to party!</span></div>
<div class='jtextfill'><span>Now is a good time to party!</span></div>
<div class='jtextfill'><span>Now is a good time to party!</span></div>
<div class='jtextfill'><span>Now is a good time to party!</span></div>
<div class='jtextfill'><span>Now is a good time to party!</span></div>
<div class='jtextfill'><span>Now is a good time to party!</span></div>
<div class='jtextfill'><span>Now is a good time to party!</span></div>
<div class='jtextfill'><span>Now is a good time to party!</span></div>
<div class='jtextfill'><span>Now is a good time to party!</span></div>
<div class='jtextfill'><span>Now is a good time to party!</span></div>
<div class='jtextfill'><span>Now is a good time to party!</span></div>
<div class='jtextfill'><span>Now is a good time to party!</span></div>
<div class='jtextfill'><span>Now is a good time to party!</span></div>
<div class='jtextfill'><span>Now is a good time to party!</span></div>
<div class='jtextfill'><span>Now is a good time to party!</span></div>
<div class='jtextfill'><span>Now is a good time to party!</span></div>
<div class='jtextfill'><span>Now is a good time to party!</span></div>
<div class='jtextfill'><span>Now is a good time to party!</span></div>
<div class='jtextfill'><span>Now is a good time to party!</span></div>
<div class='jtextfill'><span>Now is a good time to party!</span></div>
<div...

CSS

.jtextfill {
    background: red;
    height: 100px;
    width: 200px;
}

JavaScript

(function($) {
    $.fn.textfill = function(options) {
        var start = (new Date).getTime(),
            node = $(this),
            max = options.maxFontPixels,
            min = 3,
            span = $('span:visible:first', this),
            maxHeight = node.height(),
            maxWidth = node.width(),
            size,
            isTooBig,
            finalSize = null;

        do {
            console.log(size);
            size = Math.round((min + max) / 2);
            span.css('font-size', size);
            isTooBig = (span.height() > maxHeight || span.width() > maxWidth);
            if (isTooBig) {
                max = size - 1;
            } else {
                min = size;
            }
            if (min === max) {
                finalSize = max;
            }
        } while (finalSize === null);

        span.css('font-size', finalSize);

        console.log('elements:', node.size(), 'elapsed time:', (new Date).getTime() - start);
        return this;
    }
    })(jQuery);


$(document).ready(function() {
    $('.jtextfill').textfill({ maxFontPixels: 199 });
});