JSFiddle - React, Tailwind, and code Playground

HTML

<div id="ev-sponsors">
  CLICK ME
</div>
<div id="ev-donate-form">
  <p><strong>
  Set the height of this div to 'auto' after the animation that opened it.
  </strong></p>
  <textarea rows="4" cols="50">
  Resize this text area and you'll see it get cut off.
  </textarea>
</div>

CSS

#ev-sponsors {
  border: 1px solid;
  padding: 1em;
  text-align: center;
  cursor: pointer;
}
#ev-donate-form {
  height: 0;
  overflow: hidden;
}

JavaScript

$(function(){
    var el = $('#ev-donate-form'),
        curHeight = el.height(),
        autoHeight = el.css('height', 'auto').height();
    el.height(curHeight);
    $( "#ev-sponsors" ).click(function() {
      if(el.height() == 0)
        el.height(curHeight).animate({height: autoHeight}, 600);
      else
        el.height(autoHeight).animate({height: curHeight}, 600);
    });
});