JSFiddle - React, Tailwind, and code Playground

by HikariNoSekai

HTML

<div id="a" class="test">
    <div><span class="nbsp">&nbsp;</span>A</div>
    <div class="measure"></div>
</div>

<div id="b" class="test">
    <div><span class="nbsp">&nbsp;</span>B</div>
    <div class="measure"></div>
</div>

CSS

.test {clear: both;}
#a { font-size: 0.9375rem; }
#b { font-size: 0.9375rem; }
.measure { border: 1px solid red; float:left; height: 20px;}

JavaScript

var aWidth =  $('#a .nbsp').width();
var bWidth =  $('#b .nbsp').width();
alert('Width of nbsp before A: ' + aWidth);
alert('Width of nbsp before B: ' + bWidth);

$('#a .measure').css('width', aWidth);
$('#b .measure').css('width', bWidth);