JSFiddle - React, Tailwind, and code Playground

HTML

<div id="log1" style="display: none;">
</div>
<br />
<br />
<br />
<div id="log2" style="visibility: hidden;">
</div>

<br />
<br />
<br />
<div id="log3" style="opacity: 0">
</div>

JavaScript

var $log1 = $("#log1");
var $log2 = $("#log2");
var $log3= $("#log3");

//Showing what happens with display: none;
$log1.append($("<div></div>").html("width width display:none: "+ $log1.width()));
$log1.show();
$log1.append($("<div></div>").html("width after show: "+ $log1.width()));

//Showing what happens with visibility: hidden;
$log2.append($("<div></div>").html("width width visibility:hidden: "+ $log2.width()));
$log2.css({visibility: 'visible'});
$log2.append($("<div></div>").html("width after show: "+ $log2.width()));

//Showing what happens with opacity: 0;
$log3.append($("<div></div>").html("width width opacity:0: "+ $log3.width()));
$log3.css({opacity: 1});
$log3.append($("<div></div>").html("width after show: "+ $log3.width()));