JSFiddle - React, Tailwind, and code Playground

HTML

<div id="myTest" class="maximize_size">
    Test
</div>

CSS

#myTest {
    width: 250px;
    height: 40px;
    border: 1px solid #000;
    font-family: Lucida Console;
}

JavaScript

$(".maximize_size").each(function(){
    var element = $(this);
    var content = element.contents();
    
    var raiseContent = $("<div></div>");
    content.wrap(raiseContent);
    
    var currentSize = 10;
    while (currentSize < 150) {
        raiseContent.css({"font-size": currentSize + "px"});
        console.log(raiseContent.height() + " : " + element.height());
        if (raiseContent.height() > element.height())
            break;
        currentSize++;
    }
    
    element.css({"font-size": currentSize + "px"});
    content.unwrap();
});