JSFiddle - React, Tailwind, and code Playground

HTML

<button>press me</button>
<div class="collapsable collapsed" id="outer">
    <div id='inner'>
    lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit
    </div>
</div>
<div>
     lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit 
</div>

CSS

.collapsable {
    width:100px;
    -webkit-transition: height .5s ease;
    -moz-transition: height .5s ease;
    transition: height .5s ease;
    background:#ccc;
    overflow: hidden;
}
.collapsed {
    height:0px;
}

JavaScript

$('button').bind('click', function(e) { 
    e.preventDefault();
    var w = $('#outer');
    if (w.hasClass('collapsed')) {
        w.css({ "height": $('#inner').outerHeight() + 'px' });

    } else {
        w.css({ "height": "0px" });
    }
    w.toggleClass('collapsed');
});