JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <ul class="list">
        <li class="list-el">
            <div class="el-top">Expand 1</div>
            <div class="el-bottom">Cupcake liquorice cupcake sweet roll ice cream caramels. 
                Lollipop dragée chupa chups. Sugar plum candy jelly-o bonbon gummies caramels.
                Jelly icing tiramisu candy chupa chups chocolate bar. 
                Sweet pastry jelly-o marshmallow jelly lollipop pie marshmallow cookie. 
                Lollipop sugar plum lollipop jelly lollipop pudding. 
                Tart jelly-o gummi bears sweet roll gummi bears.
                Jelly icing tiramisu candy chupa chups chocolate bar. 
                Sweet pastry jelly-o marshmallow jelly lollipop pie marshmallow cookie. 
                Lollipop sugar plum lollipop jelly lollipop pudding. 
                Tart jelly-o gummi bears sweet roll gummi bears.
            </div>
        </li>
        <li class="list-el">
            <div class="el-top">Expand 2</div>
            <div class="el-bottom">Lollipop sugar plum lollipop jelly lollipop pudding. 
                Tart jelly-o gummi bears sweet roll gummi bears.
                Jelly icing tiramisu candy chupa chups chocolate bar. 
                Sweet pastry jelly-o marshmallow jelly lollipop pie marshmallow cookie. 
                Lollipop sugar plum lollipop jelly lollipop pudding. 
                Tart jelly-o gummi bears sweet roll gummi bears.
                Jelly icing tiramisu candy chupa chups chocolate bar. 
                Sweet pastry jelly-o marshmallow jelly lollipop pie marshmallow cookie. 
                Lollipop sugar plum lollipop jelly lollipop pudding. 
            </div>
        </li>
    </ul>
</div>

CSS

ul{
    list-style: none;
    max-width: 600px;
    margin: 0 auto;
}
.list{
    width: 100%;
    padding: 0;
}
.list-el{
    width: 100%;
    background: #ff00ff;
    margin-top: 10px;
}

.el-top{
    width: 100%;
    text-align: center;
    line-height: 75px;
}

.el-bottom{
    text-align: center;
    background: #f0fff0;
    width: 100%;
    text-align: left;
    max-height: 0;
    overflow: hidden;
    height: 0;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
}

.list-el:hover .el-bottom{
    max-height: 700px;
    height: 100%;
}