JSFiddle - React, Tailwind, and code Playground

HTML

<div id="parent">
    <div class="child">
        Child1
    </div><div class="child">
        Child2
        <br />
        Child2
        <br />
        Child2
    </div><div class="child">
        Child3
        <br />
        Child3
    </div>
</div>

CSS

#parent{
                border:1px solid red;
                display:block;
                margin:auto;
                overflow:hidden; /* Comment this line to see children */
                padding:5px;
                position:relative;
                white-space:nowrap;
                width:200px;
    
                transition: height 0.4s;
        }
        .child{
                background-color:yellow;
                box-sizing:border-box;
                display:inline-block;
                margin:0;
                vertical-align:top;
                width:100%;
                overflow:hidden;
        }

JavaScript

var animation_prefs = {
    duration: 3000,
    start: function() {
        $('.child').height('auto');
    },
    step: function(now) {
        var current_index = (Math.floor((now + 50) / 100) * -1);
        $('#parent').height($('.child:eq(' + current_index + ')').outerHeight());
        $('#parent').data('current', current_index);
    },
    complete: function() {
        $('#parent').height('auto');
        $('.child:not(:eq('+$('#parent').data('current')+'))').height(0);
    }
}

$('.child:eq(0)').animate(
    {
        marginLeft:'-200%' //~ Move it back 2 children
    },
    animation_prefs
).animate(
    {
        marginLeft:'-100%' //~ Move it back 1 child
    },
    animation_prefs
).animate(
    {
        marginLeft:'-200%' //~ Move it back 2 children again
    },
    animation_prefs
);