JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi et.</h1>

<div id="compareMe"></div>

CSS

#compareMe{
    width : 50%
}

h1{
    display : inline-block;
}

JavaScript

jQuery('h1').each(function() {
    
    var container = jQuery('#compareMe');
    
    while( jQuery(this).width() > container.width() ) {
        
        jQuery(this).css('font-size', (parseInt(jQuery(this).css('font-size')) - 1) + "px" );
        
    }
    
});