JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
<div id="left" class="content_left">LEFT</div>

<div id="right" class="content_right">RIGHT</div>

</div>

CSS

html,body {
    margin:0;
    padding:0;
}


#wrapper {
    width:100%;
    overflow:hidden;
    white-space:nowrap;
    height:683px;
}
#left, #right {
    display:block;
    width: 50%;
    float:left;
    height:100%;

}
#left {
    background:blue;
}
#right {
    background:green;
}

JavaScript

$(document).ready(function(){
            $("#left").hover(function(){
                $("#left").animate({width:"55%"},50);
                $("#right").animate({width:"45%"},50);
            },function(){
            $("#left").animate({width:"50%"},50);
            $("#right").animate({width:"50%"},50);
                })
        })

$(document).ready(function(){
            $("#right").hover(function(){
                $("#right").animate({width:"55%"},50);
                $("#left").animate({width:"45%"},50);
            },function(){
            $("#right").animate({width:"50%"},50);
            $("#left").animate({width:"50%"},50);
                })
        })