JSFiddle - React, Tailwind, and code Playground

HTML

<div class="before-after">
			<div class="wrap">

				<div class="gallery">
					<img src="https://img4.goodfon.ru/wallpaper/nbig/1/7c/kartinka-loshadi-liubov-serdechki.jpg" class="img">

					<div class="gallery_resize">
						<img src="https://www.ixbt.com/img/n1/news/2019/5/3/chrome-73-mode-sombre-android_large.jpg" class="img">


					</div>
						<div class="slider_switch">
							<img src="https://ar.habcdn.com/photos/project/big/previo-a-la-pastina-238830.jpg">
						</div>
				</div>

			</div>
		</div>

CSS

.before-after {
	position: relative;
	margin: 1% auto;
	background: gray;
	width: 50%;
	overflow: hidden;
}

@media screen and (max-width: 1200px) {
	.before-after {
	width: 80%;
	}
}


.slider-container {
display: flex;
flex-direction: column;
align-items: center;
}

.wrap,
.gallery,
.img {
	width: 100%;
	height: 28%;
	margin: 0;
	padding: 0;
}

.wrap {
	width: 100%;
	height: 35%;
	position: relative;
}

.gallery {
	position: relative;
	display: flex;
	z-index: 1;
}

.img {
	display: block;
	cursor: pointer;
	object-fit: cover;
	object-position: left center;
}

.gallery_resize,
.gallery_resize::after {
position: absolute;
top: 0;
cursor: pointer;
}

.gallery_resize {
	left: 0;
	width: 50%;
	overflow: hidden;
}

.tr {
	transition: 0.4s;
}

.gallery_resize {
	content: '';
	width: 50%;
	background-color: #fff;
	box-sizing: border-box;
	position: absolute;
	right: 0;
	height: 100%;
	z-index: 20;
}

.gallery_resize img {
	width: 100%;
	height: 100%;
}

.slider_switch {
	width: 10%;
	height: 100%;
	position: absolute;
	z-index: 50;
	left: 47.5%;
	top: 0;
	bottom: 0;/*
	display: none;*/
}

.slider_switch img {
	width: 50%;
	min-height: 100%;
	object-fit: contain;
	object-position: center center;
}

JavaScript

const gallery = document.querySelector('.gallery'),
		galleryResize = document.querySelector('.gallery_resize'),
		sliderSwitch = document.querySelector('.slider_switch');

sliderSwitch.addEventListener('mousedown', (event) => {
let x = event.offsetX
galleryResize.classList.remove('tr')
galleryResize.style.width = x + 'px'
  
})

gallery.addEventListener('mouseup', (event) => {
galleryResize.style.width = 50 + '%'
galleryResize.classList.add('tr')
})

/* 1. При mousedown на sliderSwitchи и mousemove по gallery изменять ширину galleryResize и позицию sliderSwitch по X\
(ширина galleryResize = позиция left sliderSwitch + 2.5 '%')
2. При mouseup обернуть изменения
*/