JSFiddle - React, Tailwind, and code Playground

by Sam G

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%;
    transition: width 0.5s ease-in-out;
}
#left {
    background:blue;
}
#right {
    background:green;
}

JavaScript

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


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