Создание драгбара для изменения размера DIV внутри CSS GRIDS ⇐ Html

[Anonymous]

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

Я использую сетки CSS, чтобы позиционировать мои элементы внутри контейнера < /p>

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

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

A

B

< /code>

css: < /p>

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