Как изменить размеры границ?

Question

Chesterfield25 @Chesterfield25

JavaScript

Как изменить размеры границ?

Мой html

</code<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/style.css" rel="stylesheet">
    <title>2D ProgressJs Engine</title>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
        <div class="container-fluid">
            <img src="assets/img/16logo.png" alt="">
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
                <ul class="navbar-nav">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            File
                        </a>
                        <ul class="dropdown-menu dropdown-menu-dark bg-dark" aria-labelledby="navbarDarkDropdownMenuLink">
                            <li><a class="dropdown-item" href="#">New Project</a></li>
                            <li><a class="dropdown-item" href="#">Open Project</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="#">Save As</a></li>
                            <li><a class="dropdown-item" href="#">Save</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container-fluid h-100">
        <div class="row row-top resizable-parent">
            <div class="col-3 resizable bg-dark">
                <!-- Left panel -->
                <p>Left panel</p>
            </div>
            <div class="col-6 resizable bg-success">
                <!-- Main content area -->
                <p>Main panel</p>
            </div>
            <div class="col-3 resizable bg-dark">
                <p>Right panel</p>
            </div>
        </div>
        <div class="row row-bottom resizable-parent">
            <div class="col-12 resizable bg-success">
                <!-- Bottom-center panel -->
                <p>Bottom panel</p>
            </div>
        </div>
    </div>

    <script src="assets/js/index.js"></script>
    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script>
    -->
</body>
</html>

js

// Обработка событий изменения размеров колонок
const resizableParents = document.querySelectorAll('.resizable-parent');
const resizableChildren = document.querySelectorAll('.resizable');

let isResizing = false;
let startX;
let startWidth;
let startHeight;
let parentRow;

function initResize(event) {
    isResizing = true;
    startX = event.clientX;
    startWidth = parseInt(window.getComputedStyle(event.target).width);
    startHeight = parseInt(window.getComputedStyle(event.target).height);
    parentRow = event.target.closest('.row');
}

function resizeColumn(event) {
    if (!isResizing) return;

    const deltaX = event.clientX - startX;
    const deltaY = event.clientY - startX;
    const newWidth = (startWidth + deltaX) + 'px';
    const newHeight = (startHeight + deltaY) + 'px';

    if (parentRow.classList.contains('row-top')) {
        const siblingColumns = parentRow.querySelectorAll('.resizable');
        const siblingWidth = (startWidth + deltaX) / siblingColumns.length + 'px';
        siblingColumns.forEach(column => {
            if (column !== event.target) {
                column.style.width = siblingWidth;
            }
        });
    } else if (parentRow.classList.contains('row-bottom')) {
        const parentHeight = parseInt(window.getComputedStyle(parentRow).height);
        const siblingColumns = parentRow.querySelectorAll('.resizable');
        const siblingHeight = (startHeight + deltaY) / siblingColumns.length + 'px';
        siblingColumns.forEach(column => {
            if (column !== event.target) {
                column.style.height = siblingHeight;
            }
        });
        if (parentHeight > parentRow.offsetHeight) {
            parentRow.style.height = parentHeight + 'px';
        }
    }

    event.target.style.width = newWidth;
    event.target.style.height = newHeight;
}

function stopResize() {
    isResizing = false;
}

for (let i = 0; i < resizableChildren.length; i++) {
    resizableChildren[i].addEventListener('mousedown', initResize);
}

window.addEventListener('mousemove', resizeColumn);
window.addEventListener('mouseup', stopResize);

Как с помощью js сделать так что бы при перетягивание мышкой колонок или блоков изменялись размеры как на скриншоте