JSFiddle - React, Tailwind, and code Playground

HTML

<div class="works">
    <h1>This example works</h1>
    <p>bla bla bla bla</p>
    <p>bla bla bla bla</p>
    <p>bla bla bla bla</p>
    <p>bla bla bla bla</p>
    <p>bla bla bla bla</p>
    <p>bla bla bla bla</p>
    <p>bla bla bla bla</p>
    <p>bla bla bla bla</p>
    <p>bla bla bla bla</p>
    <p>bla bla bla bla</p>
    <p>bla bla bla bla</p>
    <p>bla bla bla bla</p>
</div>
<div class="doesntwork">
    <h1>This example does not work</h1>
    <p>bla bla bla bla</p>
    <p>bla bla bla bla</p>
    <p>bla bla bla bla</p>
    <p>bla bla bla bla</p>
    <p>bla bla bla bla</p>
    <p>bla bla bla bla</p>
    <p>bla bla bla bla</p>
    <p>bla bla bla bla</p>
    <p>bla bla bla bla</p>
    <p>bla bla bla bla</p>
    <p>bla bla bla bla</p>
    <p>bla bla bla bla</p>
</div>

CSS

div.example {
max-height:20px;
    display:block;
    overflow:hidden;
    -webkit-transition: max-height 0.5s linear;
}
div.example:hover {
height:100%;
    max-height: 200px;
    -webkit-transition: max-height 0.5s linear;
}
div.doesntwork {
    height:20px;
max-height:20px;
    display:block;
    overflow:hidden;
    -webkit-transition: max-height 0.5s linear;
}
div.doesntwork:hover {
height:100%;
    max-height: 200px;
    -webkit-transition: max-height 0.5s linear;
}