JSFiddle - React, Tailwind, and code Playground

HTML

<div style="float:left; width:30%;border-right:1px solid #000;">
    <div class="slide" style="display:none;">Sliding Something into place</div>
    <div>This is always shown, but jumps down when the slide animation starts instead of sliding down with the element as it's displayed and it stays in place as the div above hides instead of sliding smoothly with it.</div>
</div>
<div style="float:left;width:30%;border-right:1px #000 solid;">
    <div class="slide1" style="display:none;">Sliding Something into place</div>
    <div>This is always shown, and slides down smoothly when the animation starts, but the actual content in the area being revealed never moves while the animation happens.</div>
</div>
<div style="float:left;width:30%;">
    <div class="slide2" style="display:none;">
        <div class="inner">
            Sliding Something into place
        </div>
    </div>
    <div>This is always shown, and slides down smoothly when the animation starts, but the actual content in the area being revealed never moves while the animation happens.</div>
</div>

CSS

.hidden-container{height:0px;}
.slide2{overflow:hidden;position:relative;}
.inner{display:inline-block;position:relative;}

JavaScript

setTimeout(function() {
    show();
    show1();
    show2();
}, 500);

function show() {
    $(".slide").show('slide', {
        direction: 'up'
    }, 1000, function() {
        hide();
    });
}

function hide() {
    setTimeout(function() {
        $(".slide").hide('slide', {
            direction: 'up'
        }, 1000);
    });
}

function show1() {
    $(".slide1").slideDown(1000, function() {
        hide1();
    });
}

function hide1() {
    setTimeout(function() {
        $(".slide1").slideUp(1000);
    });
}



function show2() {
    $(".slide2").show();
    $(".slide2 .inner").css('top',"-"+$(".slide2 .inner").outerHeight()+"px");
    $(".slide2").addClass('hidden-container');
    $(".slide2 .inner").animate({top:'0'},1000);
    $(".slide2").removeClass('hidden-container', 1000, function(){
        hide2();
    });
}

function hide2() {
    setTimeout(function() {
        $(".slide2 .inner").animate({top:"-"+$(".slide2 .inner").height()+"px"},1000);
        $(".slide2").addClass('hidden-container', 1000);
    });
}