JSFiddle - React, Tailwind, and code Playground

HTML

<div style="width: 400px; border: 1px solid black;">
    <span style="display: inline-block; font-size: 50px;">This is my text that I want to fit</span>
</div>

JavaScript

$(function() {
    var span = $('span');
    var fontSize = parseInt(span.css('font-size'));
    
    do {
        fontSize--;
        span.css('font-size', fontSize.toString() + 'px');
    } while (span.width() >= 400);
});