JSFiddle - React, Tailwind, and code Playground

HTML

<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>

JavaScript

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

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

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