JSFiddle - React, Tailwind, and code Playground

by ManuOP

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link type="text/css" href="1.block_in_center_question.css" rel="stylesheet">
</head>
<body>
<div id="first_block" class="first_block">
	<div id="auxiliary_block"> 
		<div id="second_block" class="second_block"></div>
		<input id="point" class="point" name="name_point" type="button">
	</div>
</div>

<script src="1.block_in_center_question.js"></script>
</body>
</html>

CSS

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

div {
	display: flex;
	flex-direction: column;
}


div.first_block {
    height: 300px;
    width: 500px;
    background: green;
}

div#auxiliary_block {
	  position: absolute;
}

div.second_block {
	  height: 200px;
	  width: 300px;
    background: orange;
}

input.point {
    position: absolute;
    cursor: pointer;
    height: 14px;
    width: 14px;
    border: none;
    background: black;
    right: -7px;
    top: 50%;
}

JavaScript

"use strict";
let second_block = document.getElementById('second_block');
let point = document.getElementById('point');
function change_second_block() {
	if(second_block.clientWidth < 500) {
		second_block.style.width = `${start_x + event.pageX}px`;
	}
}
point.addEventListener('mousedown', (event) => {
	window.start_x = second_block.clientWidth - event.pageX;
	document.addEventListener('mousemove', change_second_block);
});