JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outside_box">
    <div class="our_content">
        <p contenteditable="">This is some content that could be any length. In fact, click on it to edit it in place.</p>
    </div>
</div>

CSS

.outside_box {
    background-color: #808080;
    height: 200px;
    margin: 0 auto 1em;
    width: 200px;
}

.our_content {
    background-color: #444444;
    border-bottom: 1px solid #FFFFFF;
    color: #FFFFFF;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.8s ease 0s;
}

JavaScript

$('.outside_box').mouseenter(function() {
    $('.our_content').css('height', 'auto');
    $('.our_content').css('max-height', '200px');
});

$('.outside_box').mouseleave(function() {
    
    $('.our_content').css('max-height', '0px');
    $('.our_content').css('height', '0px');
});