JSFiddle - React, Tailwind, and code Playground

HTML

<div id='asta' style="width: 300px; max-width: 300px; min-width: 300px; border: 1px solid black; font-size: 500px; height: 100px; max-height: 100px; min-height: 100px; ">
    This is my text that I want to fit
</div>

JavaScript

$(function() {
    var asta = document.getElementById('asta');
    while ( asta.offsetHeight < asta.scrollHeight ||  asta.offsetWidth < asta.scrollWidth)
    {
        var nr = parseInt($('#asta').css('font-size'));
        nr --;
        $('#asta').css('font-size', nr+'px');
    }
});