JSFiddle - React, Tailwind, and code Playground

HTML

<div class="input-form">
<input type="text" name="testForm" id="testForm" /><span class="info"></span>
</div>
<br/>
<div class="mirror">

</div>

CSS

.mirror{
    width:auto;
    position: absolute;
    text-align: center;
    border: 1px dotted purple;
}

JavaScript

$('#testForm').keyup(function(){
    var dom = $('.mirror');
    var len = dom.width();
    
    if (len >= 0 && len <= 94){
        if (len >= 80 && len <= 94){
           
           // removing chars? smooth transition 
           while (dom.width() <= 94){
               dom.css('font-size',parseInt(dom.css('font-size'),10)+1+'px');
               $('.info').text(parseInt(dom.css('font-size'),10)+1+'px');
           }
        }else{
            dom.css('font-size','40px');
            $('.info').text('40px');
        }
    }else{
        //to many chars => make it smaller :-)
        while (dom.width() > 94){
            dom.css('font-size',parseInt(dom.css('font-size'),10)-1+'px');
            $('.info').text(parseInt(dom.css('font-size'),10)-1+'px');
        }        
    }
    dom.text($(this).val());
    //some position stuff
});