Draggable and Resizable Div Javascript

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div id="app">
        <h3>Javascript Resize div on drag</h3>
        <div class="Block" id="block">
            <div id="Resizable1" style="width: 50%; background-color:#80DEEA;" class="ResizableBlock"></div>
            <div id="Draggable" draggable="true" class="Draggable"></div>
            <div id="Resizable2" style="width: 50%; background-color:#006064;" class="ResizableBlock"></div>
        </div>
    </div>

let draggableWidth = 20;
            let isDragging = false;

draggable.addEventListener('mousedown', startDrag);
            window.addEventListener('mousemove', handleDrag);
            window.addEventListener('mouseup', stopDrag);

function startDrag(event) {
                event.preventDefault();
                draggableWidth = event.clientX - block.getBoundingClientRect().left;
                isDragging = true;
            }

function handleDrag(event) {
                if (isDragging) {
                    event.preventDefault();

blockWidth = block.offsetWidth;
                    const newResizable1Width = (event.clientX - block.getBoundingClientRect().left) / blockWidth * 100;
                    resizable1.style.width = `${newResizable1Width}%`;
                    resizable2.style.width = `${100 - newResizable1Width}%`;
                }
            }

function stopDrag() {
                isDragging = false;
            }

});
    </script>

.Block {
            display: flex;
            align-items: center;
        }

.ResizableBlock {
            border: 1px solid black;
            height: 200px;
            box-sizing: border-box;
            /* Add this line */
        }

.Draggable {
            background: rgba(1, 1, 1, 0.2);
            border-bottom: 1px solid black;
            border-right: 1px solid black;
            border-top: 1px solid black;
            cursor: col-resize;
            height: 200px;
            width: 10px;
        }
    </style>
</body>

</html>