JSFiddle - React, Tailwind, and code Playground

HTML

Clicking the links mid-animation should stop the animation, and start the next. But a problem arises when you try to expand the Div again: it returns to the height at which the animation was stopped, leaving a significant portion of content hidden outside of view.

<div id="clicker"><a href="#">Click me! :D</a></div>
<div id="clickee" style="display:none;">This Div's height is defined by its content. There is no other definition for this div's height. Animation should allow it to go all the way down to the end of the world, but I am having no such luck. What do?</div><br />
<br />
<br />
<div id="clicker2"><a href="#">Click me more! >8D</a></div>
<div id="clickee2" style="display:none;">This is the second Div. Like the first, the text is the only thing that defines its height. The animation, like the first, defines the height, and when interrupted, still causes problems. Again, what do?</div>

CSS

div{
    padding:.5em;
    margin:1em;
    border:1px #000;
    background:#f00;
    opacity:0.7;
    width:150px;
    color:#cff;
    text-decoration:none;
}
a   {
    color:inherit;
    text-decoration:inherit;
}

JavaScript

$(document).ready(function() {
    $("#clicker a").click(function() {
        if ($("#clickee").hasClass('clicked')) {
            $("#clickee").stop(true, false).slideUp("slow").removeClass('clicked');
        } else {
            $("#clickee").stop(true, false).slideDown("slow").addClass('clicked');
        }
    });
    $("#clicker2 a").click(function() {
        if ($("#clickee2").hasClass('clicked')) {
            $("#clickee2").stop(true, false).animate({
                height: 'hide'
            }, 500).removeClass('clicked');
        } else {
            $("#clickee2").stop(true, false).animate({
                height: 'show'
            }, 500).addClass('clicked');
        }
    });
});