JSFiddle - React, Tailwind, and code Playground

HTML

<div id="ParentNestedChild" class="b5_MouseCollapsible OuterBox">
    <div id="ChildNestedChild" class="b5_MouseCollapsible_Child-ParentNestedChild InnerBox" style="height:0px; max-height: 100px;">
        <p contenteditable="">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"></div>
<div id="ChildExternalChild" class="b5_MouseCollapsible_Child-ParentExternalChild InnerBox" style="height:0px; max-height: 100px;">
    <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:20px; max-height: 100px;">
    <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: 200px;
    margin: 0 auto 1em;
    width: 200px;
}
.InnerBox {
    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 () {
    if (b5_MouseCollapsible_ArrayObj[$(this).attr('id')] === undefined) { //taking in data on new objects
        b5_MouseCollapsible_ArrayObj[$(this).attr('id')] = $(this).attr('id'); //filling this array slot
        b5_MouseCollapsible_ArrayObj[$(this).attr('id')] = new Object(); //turning this array slot into an object
        
        //starting to collect data
        b5_MouseCollapsible_ArrayObj[$(this).attr('id')].Click = false; //click feature
        b5_MouseCollapsible_ArrayObj[$(this).attr('id')].StartingHeight = $('.b5_MouseCollapsible_Child-' + $(this).attr('id')).height(); //starting/collapsed height
        b5_MouseCollapsible_ArrayObj[$(this).attr('id')].EndingHeight = $('.b5_MouseCollapsible_Child-' + $(this).attr('id')).css('max-height'); //ending/expanded height;
        b5_MouseCollapsible_ArrayObj[$(this).attr('id')].StartingWidth = $('.b5_MouseCollapsible_Child-' + $(this).attr('id')).width(); //starting/collapsed width
        b5_MouseCollapsible_ArrayObj[$(this).attr('id')].EndingWidth = $('.b5_MouseCollapsible_Child-' + $(this).attr('id')).css('max-width'); //ending/expanded width
        
        /*alert("Click: \t\t" + b5_MouseCollapsible_ArrayObj[$(this).attr('id')].Click + "\n" + //debug alert
              "Height: \t\t" + b5_MouseCollapsible_ArrayObj[$(this).attr('id')].StartingHeight + "\n" + 
              "max-Height: \t" + b5_MouseCollapsible_ArrayObj[$(this).attr('id')].EndingHeight + "\n" +
              "Width: \t\t" + b5_MouseCollapsible_ArrayObj[$(this).attr('id')].StartingWidth + "\n" + 
              "max-Width: \t" + b5_MouseCollapsible_ArrayObj[$(this).attr('id')].EndingWidth + "\n"); */
        
        $('.b5_MouseCollapsible_Child-' + $(this).attr('id')).css('height', 'auto'); //expand height to full before starting the transition now that the data has been collected
    }
    
    $('.b5_MouseCollapsible_Child-' +...