JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">Some Text</div>

CSS

.container {
    width: 500px;
    border: 1px solid;
}

JavaScript

$(document).ready(function()
			  {
				  var txt = $(".container").text(); //get the text
				  var txt2 = "";
				  var len = txt.length;
				  			  
				  $(".container").empty();  //clear the content
				  
				  for(i=0; i<len; i++) //surround all characters with span
				  {
					  txt2 += "<span>" + txt.substr(i,1) + "</span>";    
				  }
				  
				  $(".container").html(txt2);
				  
				  $("span").css({"width":  Math.round($(".container").width())/len + "px", "display":"inline-block", "text-align":"center"});
			  }
			 );