JSFiddle - React, Tailwind, and code Playground

HTML

<div><p id="p">hello</p></div><br>
<input type="button" id="adjust" value="adjust" />

CSS

div{
    display:block;
    width:200px;
    color:white;
    background-color:blue;
}
p{
    height:200px;
    margin:0;
    padding:0;
}

JavaScript

var adjuster = document.getElementById("adjust");
adjuster.onclick = function(){
 var p = document.getElementById("p");
 var text = p.innerText;
 var s = document.createElement("span");
 s.innerText = text;
 p.innerHTML = "";
 p.appendChild(s);
 var h = p.clientHeight;
 var w = p.clientWidth;
 var size = 10;
 while(true){
   size++;
   s.style.fontSize = size + "px";
     if($(s).height() > h || $(s).width() > w){
      size-=2;//rollback to no height change
      s.style.fontSize = size + "px";
      break;
     }
 }
 p.style.fontSize = s.style.fontSize;
 p.removeChild(s);
 p.innerText = text;
};