JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    aogiahoweiaewopiafjpoewhgaiweropaiwegioawerhapweighpaoiwhefahwe
</div>
<div class="width">
    Actual Width: []px
</div>
<div class="output">
    
</div>

CSS

div.container,
div.output
{
    width: 100px;
    border: 5px solid red;
    padding: 50px 10px;
}

div.hidden
{
    display: none;
}

JavaScript

$(function(){
   
    $("div.container").each(function(){
       
        $("body").append("<div class='hidden'>"+$(this).html()+"</div>");
        var width = $("div.hidden").width();
        $("div.width").html("Actual width: "+width+"px");
        
        $("div.output").css("width", width+"px").html($(this).html());
        
        $("div.hidden").remove();
        
    });
    
});