JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="what" class = "sandia">Bringing the <b>cloud</b>, <b>visualization</b> &amp; <b><i>cutting edge technology</i></b> to the bee industry</div>
    
    <div id="message" style="float: right"> Hello</div>
    <button type="textFit" onclick="$('#what').textFit();">textFit()</button>
    <br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/> Hello World!
</body>

CSS

html, body{
    width: 100%;
    height: 100%;
}
.sandia{
    border:groove;
    width: 80%;   
    height: 30%;
}

JavaScript

function sendMessage(msg){
 //   var Message += " " +msg;
    $("#message").html(msg);
}
function toConsole(msg){
    var dNow = new Date();
     console.info(dNow.getHours() + ":" + dNow.getMinutes()+":" + dNow.getSeconds()+" : "+msg);
}
$(document).ready(function(){
    $(window).resize(function(){sendMessage("    width: "+$("#what").width()+" height: "+$("#what").height()); $('#what').textFit();});
});
// jQuery.textFit v1.0
// 9/2012 by STRML (strml.github.com)
// MIT License
// Adapted from jquery.boxfit(https://github.com/michikono/boxfit)
// To use: $('#target-div').textFit()
// Will make the *text* content inside a container scale to fit the container
// The container is required to have a set width and height
// Uses binary search, min size, max size

(function($) {
    $.fn.textFit = function(options) {
        var settings = {
            alignVert: true, // if true, textFit will align vertically using css tables
            alignHoriz: true, // if true, textFit will set text-align: center
            multiLine: true, // if true, textFit will not set white-space: no-wrap
            detectMultiLine: false, // disable to turn off automatic multi-line sensing
            minFontSize: 6,
            maxFontSize: 80,
            reProcess: true, // if true, textFit will re-process already-fit nodes. Leave to 'false' for better performance
            widthOnly: false // if true, textFit will fit text to element width, regardless of text height
        };
        $.extend(settings, options);

        return this.each(function(){

            if (this.length === 0 || (!settings.reProcess && $(this).data('boxfitted'))) {
                return $(this);
            }
            if(!settings.reProcess){
                $(this).data('boxfitted', 1);
            }
            var innerSpan, originalHeight, originalText, originalWidth;
            var low, mid, high;
           // if($(".textfitted:first-child").length())
                
            var cnt =...