JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="content">BIG MAX HEIGHT<br />BIG MAX HEIGHT<br />BIG MAX HEIGHT<br />BIG MAX HEIGHT<br />BIG MAX HEIGHT<br />BIG MAX HEIGHT<br /></div>
</div>
<div class="container reg">
    <div class="content">More accurate max-height<br />More accurate max-height<br />More accurate max-height<br />More accurate max-height<br />More accurate max-height<br />More accurate max-height<br /></div>
</div>
<div class="container reg">
    <div class="content">More accurate max-height<br />More accurate max-height<br />More accurate max-height<br />More accurate max-height<br />More accurate max-height<br />More accurate max-height<br />More accurate max-height<br />More accurate max-height<br /></div>
</div>

CSS

.container { width:100px; float:left; height: auto; min-height: 100px; max-height:100px; transition: 1s max-height; overflow:hidden;border:1px solid red;}

.container:hover { max-height:4000px;
}
.container.reg:hover {
    max-height:400px;
}
.content {
     width:100%;
    background:green;
}