JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test">Heygasdfa</div>
<h1  id="test1">asdf</h1>
<span  id="test2">asdasdfadf</span>

CSS

#test,#test1,#test2 {
  font-size: 50px;
  background: transparent;
  border-radius: 70px;
  height: 65px;
  
  box-shadow: 0px 6px 0px -2px #00F;
  font-family: sans-serif;
}

JavaScript

$.fn.textWidth = function(){
    var self = $(this),
        children = self.contents(),
        calculator = $('<span style="white-space:nowrap;" />'),
        width;

    children.wrap(calculator);
    width = children.parent().width(); // parent = the calculator wrapper
    children.unwrap();
    return width;
};

$(document).ready(function(){
    $('#test').css('width',$('#test').textWidth());
    $('#test1').css('width',$('#test1').textWidth());
    $('#test2').css('width',$('#test2').textWidth());
   
});