JSFiddle - React, Tailwind, and code Playground

HTML

<div id="scroll-container">
<ul id="scrollul">
<li id="item1" class="active">
    <div id="left"><p>Item 1</p></div>
    <div id="right">2</div>
</li>
<li id="item2"><p>Item 2</p></li>
<li id="item3"><p>Item 3</p></li>
</ul>

</div>
<input id="scrollbtn" type="button" value="Scroll" /><div id="scroll-container">

CSS

#scroll-container {
    overflow:hidden;
    width:400px;
    overflow:hidden;
    height:200px;
    border:1px solid #000;
}

#scrollul {
    height:200px;
    position:absolute;
    float:left;
}


#scrollul li {
    width:100%;
    position:relative;
    list-style-type:none;
    float:left;
}

#scrollbtn {
    position:absolute;
    top:230px;
}

#item3 {
    position:relative;
}

#left {
    /*position:relative;*/
    border:1px solid red;
    float:left;
    width:48%;
}

#right {
    /*position:absolute;*/
    border:1px solid magenta;
    float:right;
    width:48%;

}

JavaScript

$("#scrollbtn").click(function(){
    $("#scrollul li").animate({top: "-=36px"}, 500, fix);
    
    function fix(){
        $("#scrollul li").css("top", "0px");
        $("#scrollul").append($(".active"));
        
        
    }
    $("#scrollul li").last().removeClass('active');
    $("#scrollul li").first().addClass('active');
});