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

#wrapper {
    width:100%;
    overflow:hidden;
    white-space:nowrap;
}
#left, #right {
    display:inline-block;
    width: 20%;
}
#left {
    background:red;
}
#right {
    background:yellow;
}

JavaScript

$("#left, #right").each(function() {
        $(this).data("standardWidth", $(this).width());
    });

    $("#left, #right").hover(function() {
        $(this).animate({
            width: "70%"
        }, 300 );
        $(this).parent().children().not(this).animate({
            width: "30%"
        }, 300 );
    }, function() {
        $(this).parent().children().each(function() {
            $(this).animate({
                width: $(this).data("standardWidth")
            }, 300 );
        });
    });