JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
		<div class='vertical1'>

		</div>
		<div class='vertical2'>

		</div>
		<div class="separator">
		</div>
	</div>

CSS

#wrapper{
	width:400px;
	margin:0 auto;
	position:relative;
}
.vertical1 {
    width:400px;
	height:200px;
	background-color:red;
	position:absolute;
} 
.vertical2 {
    width:400px;
	height:200px;
	background-color:blue;
	position:absolute;
} 
.separator{
	width:5px;
	height:200px;
	background-color:black;
	position:absolute;
	z-index:2;
}

JavaScript

$(document).ready(function(){
	$('#wrapper').mousemove(function(e){
		var sep = $(this).children('.separator');
		var left = $('#wrapper').offset().left;
		var top = $('#wrapper').offset().top;
		if(e.clientX >= left && e.clientX <= (left + 395)){
		sep.offset({top:top, left:e.clientX});
		}
	});
})