JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div id="lol">Some random text!</div>
    <div id="happy" style="display: none" data-init="display: none">lol</div>
</div>

<div class="container">
    <div id="lol1">Some random text!</div>
    <div id="happy1" style="display: none" data-init="display: none">lol</div>
</div>


<div class="container">
    <div id="lol2">Some random text!</div>
    <div id="happy2" style="left: -200px" data-init="left: -200px">lol</div>
</div>

<div class="container">
    <div id="lol3">Some random text!</div>
    <div id="happy3" style="left: 200px; opacity: 0;" data-init="left: 200px; opacity: 0;">lol</div>
</div>

<button>Run 'em</button>

CSS

div.container {
    position: relative;
    height: 30px;
}
div.container div {
    position: absolute;
    top: 0;
    left: 0;
}

JavaScript

// Just an initialization helper to aid in rerunning the animations
//
// Is uses the data-init attribute on the element to reset the style to its
// original state.  Not recommending this approach for production :)
function setup(cb) {
    console.log('setup');
    $('.container div:nth-child(2)').removeAttr('style').each(function() {
        console.log('setting style to: ' + $(this).data('init'));
        $(this).attr('style', $(this).data('init'));
    });
    $('.container div:nth-child(1)').removeAttr('style').each(function() {
        console.log('setting style to: ' + $(this).data('init'));
        $(this).attr('style', $(this).data('init'));
    });
    
    setTimeout(cb,0);
}

function animateEm() {
    $('#lol').fadeOut(1000);
    $('#happy').fadeIn(1000);

    $('#lol1').slideUp(1000);
    $('#happy1').slideDown(1000);

    $('#lol2').animate({left: -200});
    $('#happy2').animate({left: 0});

    $('#lol3').animate({opacity: 0});
    $('#happy3').animate({left: 0, opacity: 1});
}

$('button').on('click', function() {
    setup(animateEm);
});