JSFiddle - React, Tailwind, and code Playground

HTML

<a id="1" href="#">Load</a>&nbsp;<a id="2" href="#">Clear</a>
<div class="bounding-box">
    Static text
<div class="wrapper">
    <div class="slide">
        Ajax loaded info
    </div>
</div>
</div>

CSS

.bounding-box{
    border: solid #F00;
}

.wrapper {
    height: 0;
    width: 100%;
    overflow: hidden;
    border: solid;
}

.slide {
    padding: 10px;
    height: auto;
    background-color: #ccc;
    -webkit-transition: -webkit-transform 1s ease;
    -webkit-transform: translateY(-100px);
    
}

.wrapper.animated {
    height: auto;
    -webkit-transform: translateY(0);
}

.wrapper.animated .slide {
    -webkit-transform: translateY(0);
}

.wrapper.out .slide {
    -webkit-transform: translateY(-100px);
}

JavaScript

$('#1').click(function() {
    if ($('.wrapper').hasClass('out')) {
        $('.wrapper').removeClass('out');
    }
    $('.wrapper').addClass('animated');
    return false;
});
$('#2').click(function() {
    $('.slide').css("-webkit-transform:", "translateY(0)");
    $('.wrapper').addClass('out');
    return false;
});