JSFiddle - React, Tailwind, and code Playground

HTML

<div id ="wrapper">
	<div id="box3"></div>
	<div id ="next"></div>
</div>
<button id="btn" type="button">Click Me!</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

CSS

#yyy{

		position: relative;
	}
	#box3{
		background-color: red;
		width:100px;
		height: 100px;
		position: absolute;
		opacity: 0.5


	}
	#next{
		background-color: green;
		width:100px;
		height: 200px;
		position: absolute;
		left:0px;

	}
	#btn{
		background-color: yellow;
		width:100px;
		height:50px;
		position: absolute;
		top:300px;
	}

JavaScript

$(document).ready(function(){

$("#btn").click(function(){

$('#box3').animate({
  left: '-50%'
}, 300, function() {
  $('#box3').css('left', '150%');
});

$('#box3').next().animate({
  left: '50%'
}, 300);

	});
});