JSFiddle - React, Tailwind, and code Playground

HTML

<div id="good" class="widther">hi</div>
<div style="display: none;">
    <div id="bad" class="widther">hi</div>
</div>
<pre id="result">The following lines should be equal:</pre>

CSS

.widther {
    width:100px;
    border:10px solid black;
    padding:10px;
    margin:10px;
}

JavaScript

var result = $("#result");

result.append("\n" + $('#good').width() + " === " + $('#bad').width());
result.append("\n" + $('#good').innerWidth() + " === " + $('#bad').innerWidth());
result.append("\n" + $('#good').outerWidth() + " === " + $('#bad').outerWidth());
result.append("\n" + $('#good').outerWidth(true) + " === " + $('#bad').outerWidth(true));