JSFiddle - React, Tailwind, and code Playground

HTML

<div id="first" style="border: 1px solid red; float: left;">
This is the first div in my sample.</div>

<div id="first" style="border: 1px solid blue;">
Second div.</div>

<div id="result" style="border: 1px solid black;">Result: </div>

JavaScript

function doLayout(caller) {
    var w1 = $('#first').width();
    var w2 = $('#first').outerWidth();
    
    $('#result').text("Result is: " + w1 + ", w2:" + w2);
    // In my real application code w1 and w2 is "0px"
}

$(document).ready(function() {
    doLayout("ready");
});
/* both works
$(window).load(function() {
    doLayout("load");
});
*/