JSFiddle - React, Tailwind, and code Playground

HTML

Demonstrates what's happening in the <a href="http://jsfiddle.net/3RBQ4/" target="_blank">first demo</a>.        
<ul>
    <li>`max-height` in green</li>
    <li>`height` in red</li>
</ul>
<br>
<button>Show details</button><br>

<div class="maxlenght">
    <div class="details">
        My details. <br>
        My details. <br>
        My details. <br>
        My details. <br>
        My details. <br>
        My details. <br>
        My details. <br>
        The end. <br>
    </div>
</div>

CSS

.details {
    background:rgba(255,0,0,0.3);
    height: auto;
}

.maxlenght {
    outline:1px dotted green;
    overflow:hidden;
    height: 0;
    transition: height 0.5s ease-in-out;
}

.maxlenght.expanded {
    height: 200px;
}

JavaScript

$('button').bind('click', function(e) {
    $('.maxlenght').toggleClass('expanded');
});