JSFiddle - React, Tailwind, and code Playground

HTML

<div id="ParentNestedChild" class="b5_MouseCollapsible OuterBox">
    <div id="ChildNestedChild" class="b5_MouseCollapsible_Child-ParentNestedChild InnerBox" >
        <p>Nested Collapse
            <br />This is some content that could be any length. In fact, click on it to edit it in place.</p>
    </div>
</div>

<div id="ParentExternalChild" class="b5_MouseCollapsible OuterBox">p</div>
<div id="ChildExternalChild" class="b5_MouseCollapsible_Child-ParentExternalChild InnerBox" style="height:auto;">
    <p contenteditable="">External Collapse
        <br />This is some content that could be any length. In fact, click on it to edit it in place.</p>
</div>

<div id="ParentSelfChild" class="b5_MouseCollapsible b5_MouseCollapsible_Child-ParentSelfChild InnerBox" style="height:auto;">
    <p contenteditable="">Self Collapse
        <br />This is some content that could be any length. In fact, click on it to edit it in place.</p>
</div>

CSS

.OuterBox {
    background-color: #808080;
    height: auto;
    margin: 0 auto 1em;
    width: 200px;
}
.InnerBox {
    height:auto;
    background-color: #444444;
    border-bottom: 1px solid #FFFFFF;
    color: #FFFFFF;
    overflow: hidden;
    transition: max-height 0.8s ease 0s;
}

JavaScript

var b5_MouseCollapsible_ArrayObj = [];

$('.b5_MouseCollapsible').mouseenter(function () {
    
    elmnt = document.getElementByClass("b5_MouseCollapsible_Child-ParentNestedChild")
    
    alert(elmnt.clientHeight);
});