JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="grandparent">
    <div id="parent">
        <img src="http://images.wisegeek.com/bee.jpg" />
        <div id="what" class = "sandia">Bringing the <span id="spanItalic">cloud</span>, <span id="spanBold">visualization</span> &amp; <span id="spanBold"><span id="spanItalic">cutting edge technology</span></span> to the energy industry</div>
    </div>
    </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%;
}
#grandparent{
    position: relative;
    top: 10%;
    left: 10%;
    width:90%;
    height: 90%;// 100%;
    max-width: 500px;
    max-height: 500px;
}
#parent{
    display:inline-block;
    position: relative;
    width:100%;
    //padding-top: 81.799591002%;
}
#parent img{
    width:100%;
}
.sandia{
    position: absolute;
    border:groove;
    top: 5%;
    left: 10%;
    width: 80%;   
    height: 20%;
    font-size: 45px;
}
#what{
    width: 80%;   
    height: 20%;
    position:absolute;
    top:0;
    right:0;
}
#spanBold{
    font-weight: bold;
}
#spanItalic{
    font-style: italic;
}

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 =...