JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
		<div class="courses-method-left-wrapper">
			<div class="courses-method-wrap left">
				<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem </p>
			</div>
			<div class="online-course-price-wrap">
				<h3>Left content wrap</h3>
				<h6>Left content text</h6>
			</div>
		</div>
		<div class="courses-method-right-wrapper">
			<div class="courses-method-wrap right">
				<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem </p>
			</div>
			<div class="offline-course-price-wrap">
				<h3>Right content wrap</h3>
				<h6>Right content text</h6>
			</div>
		</div>		
	</div>

CSS

#wrapper {
			width: 100%;
			clear: both;
			overflow: hidden;
			background: #D7DFE6;
			position: relative;
		}
		.courses-method-left-wrapper, .courses-method-right-wrapper {
			width: 45%;
			padding: 10px;
			overflow: hidden;
			float: left;
			position: relative;
		}
		.courses-method-wrap.left {
			float: left;
			position: relative;
			left: 0px;
		}
		.courses-method-wrap.right {
			position: relative;
		}
		.online-course-price-wrap {
			width: 230px;
			background: #1C2C39;
			position: absolute;
			right: -230px;
			height: 200px;
		}
		.offline-course-price-wrap {
			left: -200px;
			z-index: 0;
			width: 200px;
			position: absolute;
			height: 100%;
			top: 0px;
			background: #ccc;
			height:  200px;
		}
.hovered .online-course-price-wrap { right: 0px; }
.hovered .offline-course-price-wrap { left: 0px; }
#wrapper * {
 	-webkit-transition: all 0.7s ease-out;
	transition: all 0.7s ease-out;
	-moz-transition: all 0.7s ease-out;   
}

JavaScript

jQuery('body').on('hover','.courses-method-left-wrapper,         .courses-method-right-wrapper', function(){
        jQuery(this).toggleClass('hovered', function(){
            setTimeout(function(){
                alert('done');
            }, 700);
        });
	});