Создание панели перетаскивания для изменения размера элементов div внутри сеток CSS ⇐ CSS

[Anonymous]

У меня есть 2 блока и вертикальная линия div в одном уникальном контейнере div (код и скрипт ниже).

Я использую CSS-сетки для размещения элементов внутри контейнер

Я хотел бы использовать вертикальную линию для изменения размера двух блоков по горизонтали в зависимости от положения вертикальной линии.
Прошу прощения, если вопрос нубский, я новичок в веб-разработке, раньше использовал только Python, уже пробовал искать в Google и stackoverflow, но все решения кажутся слишком сложными и обычно требуют дополнительных библиотек, я искал что-то попроще и только JS.

HTML:

Код: Выделить всё

A

B

CSS:

Код: Выделить всё

body {
margin: 40px;
}

.wrapper {
display: grid;
grid-template-columns: 200px 8px 200px;
grid-gap: 10px;
background-color: #fff;
color: #444;
}

.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
resize: both;
}

.handler{
width: 3px;
height: 100%;
padding: 0px 0;
top: 0;
background: red;
draggable: true;
}

https://jsfiddle.net/gv8Lwckh/6/

Подробнее здесь: https://stackoverflow.com/questions/469 ... -css-grids