JSFiddle - React, Tailwind, and code Playground

HTML

The only difference between the two snippets of css is one has height 0, the other height 40.
<hr />
<div id="parent0">
    <h1>Hover me (height: 0)</h1>
    <div id="child0">
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
    </div>
</div>
<hr />
<div id="parent40">
    <h1>Hover me (height: 40)</h1>
    <div id="child40">
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
    </div>
</div>

CSS

#child0 {
    height: 0;
    overflow: hidden;
    background-color: #dedede;
    -moz-transition: height 1s ease;
    -webkit-transition: height 1s ease;
    -o-transition: height 1s ease;
    transition: height 1s ease;
}

#parent0:hover #child0 {
    height: auto;    
}

#child40 {
    height: 40px;
    overflow: hidden;
    background-color: #dedede;
    -moz-transition: height 1s ease;
    -webkit-transition: height 1s ease;
    -o-transition: height 1s ease;
    transition: height 1s ease;
}

#parent40:hover #child40 {
    height: auto;    
}

h1 { font-weight: bold; }