JSFiddle - React, Tailwind, and code Playground

HTML

<div class="a">
    <p>Hover Me</p>
    <div class="box">
        Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text
    </div>
</div>

CSS

.a {
    width: 100px;
    height: 200px;
}
.box {
    width: 500px;
    border: 1px solid #ccc;
    visibility: hidden;
    height: 0;
    overflow: hidden;
}
.a:hover .box {
    visibility: visible;
    transition: height 0.1s ease;
    height: auto;
}