JSFiddle - React, Tailwind, and code Playground

by thilakar

HTML

<div class="dd">separate</div>

<div id="leftRed"></div>
<div id="rightRed"></div>

CSS

#leftRed {width:200px; height:200px; background:red; float:left; border-right:solid 1px #000;}
#rightRed {width:200px; height:200px; background:red; float:left; border-left:solid 1px #000;}
.dd {cursor:pointer}
.god {width:402px; height:200px; background:url(111.gif) no-repeat; overflow:hidden;}

JavaScript

$('.dd').click(function() {
    
        $( "#rightRed" ).animate({"margin-left": 200,"width": 0}, 1500 );
        $( "#leftRed" ).animate({"margin-right": 200,"width": 0}, 1500 );
    
    });