JSFiddle - React, Tailwind, and code Playground

HTML

<div id="hiddenParent" class="parent">
    <div id="hiddenChild" class="child">This is the hidden child</div>
</div>

<div id="visibleParent" class="parent">
    <div id="visibleChild" class="child">This is the visible child</div>
</div>

CSS

#hiddenParent {
    display: none;
}

#visibleParent {
    display: block;
}

.parent {
    height: 300px;
    width: 500px;
    background-color: green;
}

.child {
    width: 75%;
    height: 75%;
    background-color: yellow;
}

JavaScript

$(document).ready(function() {
    alert("HIDDEN PARENT WIDTH:" + $('#hiddenParent').width());
    alert("HIDDEN PARENT HEIGHT:" + $('#hiddenParent').height());
    alert("HIDDEN CHILD WIDTH:" + $('#hiddenChild').width());
    alert("HIDDEN CHILD HEIGHT:" + $('#hiddenChild').height());
    alert("VISIBLE PARENT WIDTH:" + $('#visibleParent').width());
    alert("VISIBLE PARENT HEIGHT:" + $('#visibleParent').height());
    alert("VISIBLE CHILD WIDTH:" + $('#visibleChild').width());
    alert("VISIBLE CHILD HEIGHT:" + $('#visibleChild').height());
});