JSFiddle - React, Tailwind, and code Playground

HTML

<section class="container">
    <div>
        <input id="ac-1" name="accordion-1" type="checkbox" />
        <label for="ac-1">Check to box to show more</label>
        <article class="small">
            <p>Some content... </p>
        </article>
    </div>
</section>

CSS

.container article{
    
    background: #e6e6e6;
    margin-top: -1px;
    overflow: hidden;
    height: 0px;
    position: relative;
    z-index: 10;
    -webkit-transition: height 0.3s ease-in-out;
    -moz-transition: height 0.3s ease-in-out;
    -o-transition: height 0.3s ease-in-out;
    -ms-transition: height 0.3s ease-in-out;
    transition: height 0.3s ease-in-out;
}
.container input:checked ~ article{
    -webkit-transition: height 0.5s ease-in-out;
    -moz-transition: height 0.5s ease-in-out;
    -o-transition: height 0.5s ease-in-out;
    -ms-transition: height 0.5s ease-in-out;
    transition: height 0.5s ease-in-out;
}
.container input:checked ~ article.small{
    height: 140px;
}