JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper wrapper_1">
    <div class="activator">The max-height hack</div>
    <div class="content">
        Mary had a little lamb.<br />
        Little Lamb.<br />
        Little Lamb.<br />
        Mary had a little lamb.<br />
        It's fleece was white as snow<br />
    </div>
</div>

CSS

.wrapper{
    width:70%; 
    font-family:helvetica, arial, sans; 
    border:1px solid #565; 
    margin-bottom:4px;
    background-color:#B3B8D8;
    overflow:hidden;
    position:relative;
}

.activator{
    height:20px; 
    background-color:#718F47; 
    line-height:20px; 
    text-align:center; 
    color:#fff; 
    cursor:pointer;
}

.content{
    overflow:hidden;
    background-color:#D2D2DC;
    
    -webkit-transition: max-height 1s cubic-bezier(0, 1.05, 0, 1);
    -moz-transition: max-height 1s cubic-bezier(0, 1.05, 0, 1);
    transition: max-height 1s ease cubic-bezier(0, 1.05, 0, 1);
    
    max-height: 0;
}

.wrapper_1 .activator:hover +.content{
    -webkit-transition: max-height 1.5s ease-in-out;
    -moz-transition: max-height 1.5s ease-in-out;
    transition: max-height 1.5s ease-in-out;
    
    max-height:1000px;
}