JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="content">The grey fox jumps over the lazy dog</div>
</div>

CSS

.container {
    width: 40px;
    height: 10px;
    border: 2px solid blue;
    transition: all 0.4s ease;
    overflow: hidden;
}

.container .content {
    width: 100%;
    display: none;
}

JavaScript

$(".container").hover(function() {
    $(".content").fadeIn(800);
    var childHeight = $(".content").outerHeight(true);
    $(this).css("height", childHeight);
    
}, function() {
    $(".content").fadeOut(200);
    $(this).css("height", 10);
});