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: 100%;
    border: 1px solid #ccc;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
}
.a:hover .box {
    max-height: 999px;
    opacity: 1;
}