JSFiddle - React, Tailwind, and code Playground

HTML

<div id="first">
<p>This is all the stuff inside your "first" div.</p>
<p>This is all the stuff inside your "first" div.</p>
<p>This is all the stuff inside your "first" div.</p>
</div>
<button class="expand">Expand</button>

CSS

#first {
    height:200px;
    width:200px;
    overflow:hidden
}
p {
    min-height:100px;
    padding: 15px;
    background: #ddd;
}

JavaScript

$(function(){
    $('#first').children().wrapAll('<div class="wrapper"></div>');
    var expandedHeight = $('.wrapper').height();
    var collapsedHeight = $('#first').height();
    //$('p').text(innerHeight);
    $('button').on("click", function(){
        if ($(this).hasClass("expand")) {
            $("#first").animate({
                height: expandedHeight
            }, 'slow', function(){
                $('.expand').toggleClass("expand reset").text("reset");
            });   
        }    
       else {
        $('#first').height(collapsedHeight); 
        $(this).toggleClass("expand reset").text("expand");
       }            
    });
});