JSFiddle - React, Tailwind, and code Playground

HTML

<span id="mytext">This is my TEXT</span>

CSS

#mytext {
    font-family:Verdana, Geneva, sans-serif;
    font-size:12px;
    border:1px #000 solid;
}

JavaScript

$(document).ready(function() {
    var iniWidth = $("#mytext").width();
    alert(iniWidth);
    $("#mytext").css('display','block');
    $("#mytext").css('width','500px');
    //As we have 12px as previous font size
    var newSize = 12/iniWidth*500-1;  
    //-1 to give a gapping
    $("#mytext").css('font-size',newSize+'px');
    
});