JSFiddle - React, Tailwind, and code Playground

by zamith

HTML

<span id="ruler"></span>
<div class="wrapper">
    <span class="name">Hello World</span>
    <span class="name">I am a very very very very very big string.......................</span>
    <span class="name">I am a normal string</span>
</div>

CSS

span.name{
    display: block;
    border: 3px solid #FF0000; 
    margin-right:auto;
    margin-left:auto;
}    

div.wrapper{
    width: 500px;
    border: 3px solid #000;  
}

JavaScript

String.prototype.visualLength = function() {
    $("#ruler").html(this.toString());
    var width = $("#ruler").width();
    $("#ruler").text("");
    return width;
};

$("span.name").each(function() {
    $(this).css("width", $(this).text().visualLength());
});