JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="left-bg">
        <p>Left stuff</p>
    </div>
    <div id="right-bg">
        <p>Right stuff</p>
    </div>
</div>

CSS

#left-bg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: #000;
    color: #fff;
    width: 50%;
    margin: 0;
}

#right-bg {
    position: absolute;
    right: 0;
    bottom: 0;
    top: 0;
    background-color: #fff;
    color: 000;
    width: 50%;
    margin: 0;
}

JavaScript

$('#left-bg, #right-bg').click(
    function(){
        $(this).animate({'width': '100%'},600).siblings().animate({'width':'0'},600);
    });