JSFiddle - React, Tailwind, and code Playground

HTML

<div class="a">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque dignissimos consequuntur expedita dolor id ab aperiam dolores laboriosam quam facere neque error quia nam quis eius perferendis eaque alias iste?    
    <div class="hide">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat adipisci non nobis repellendus unde facere quas vitae quam qui iure voluptatem repudiandae neque harum excepturi a! Quasi omnis nobis mollitia.
    </div>
</div>

CSS

.a {
    background: yellow;
    -webkit-transition: 1s all;
    transition: 1s all;
}
.hide {
    max-height: 0;
    overflow: hidden;
    -webkit-transition: cubic-bezier(0, 1, 0.5, 1) .5s;
	-moz-transition: cubic-bezier(0, 1, 0.5, 1) .5s;
	transition: cubic-bezier(0, 1, 0.5, 1) .5s;
}

.hide.visible {
    max-height: 500px;
	-webkit-transition: cubic-bezier(0, 1, 0.5, 1) 100s;
	-moz-transition: cubic-bezier(0, 1, 0.5, 1) 100s;
	transition: cubic-bezier(0, 1, 0.5, 1) 100s;
}

JavaScript

$(".a").click(function(){
    $(".hide").toggleClass('visible');
});