JSFiddle - React, Tailwind, and code Playground

HTML

<div id="exp_outer">
    <div id="exp">
    this unconvered a whitespace annoyance in the field macro that was fixed by obfuscating the macro.     this unconvered a whitespace annoyance in the field macro that was fixed by obfuscating the macro.     this unconvered a whitespace annoyance in the field macro that was fixed by obfuscating the macro.     this unconvered a whitespace annoyance in the field macro that was fixed by obfuscating the macro.     this unconvered a whitespace annoyance in the field macro that was fixed by obfuscating the macro.     this unconvered a whitespace annoyance in the field macro that was fixed by obfuscating the macro.     this unconvered a whitespace annoyance in the field macro that was fixed by obfuscating the macro.     this unconvered a whitespace annoyance in the field macro that was fixed by obfuscating the macro.     this unconvered a whitespace annoyance in the field macro that was fixed by obfuscating the macro.     this unconvered a whitespace annoyance in the field macro that was fixed by obfuscating the macro.     this unconvered a whitespace annoyance in the field macro that was fixed by obfuscating the macro.     this unconvered a whitespace annoyance in the field macro that was fixed by obfuscating the macro.     this unconvered a whitespace annoyance in the field macro that was fixed by obfuscating the macro.     this unconvered a whitespace annoyance in the field macro that was fixed by obfuscating the macro. 
    </div>
</div>

<div id="tools">
<a href="#" onclick="return animUp()">Expand</a>
|
<a href="#" onclick="return animDn()">Collapse</a>
</div>

CSS

#tools {
    padding: 3px 7px;

}
#exp_outer {
    border: 1px solid #000;
    height: 500px;
}
#exp {
    background-color: #ccc;
    height: 50px;
    overflow: hidden;
}

JavaScript

function animUp() {
    
    // expanding to height: auto will NOT work.
    //$('#exp').animate({height: 'auto'}, 'slow');
    
    // one possible (but ugly) hack is to hide the div, set height to auto, note the height, revert the height and visibility. Once we have the target height, animate it.
    var exp = $('#exp');
    exp.css('visibility', 'hidden');
    exp.css('height', 'auto');
    var newHeight = exp.height();
    exp.css('height', '50px');
    exp.css('visibility', 'visible');
    
    // now animate it to newHeight
    $('#exp').animate({height: newHeight+'px'}, 'slow');
    
    return false;
}
function animDn() {
    $('#exp').animate({height: '50px'}, 'slow');
    return false;
}