2 column resizable

https://htmldom.dev/create-resizable-split-views/

by Larry Kluger

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css">

<container class="ctop">
    <!-- Left element -->
    <container class="cleft"><container class="fixh">
Left
    </container></container>

    <!-- The resizer -->
    <div class="resizer" id="dragMe"></div>
    <!-- Right element -->
    <container class="cright"><container class="fixh">
        <h3>
        Log
        </h3>
        <p id="log">
        You can adjust the width of the columns.
        </p>
    </container></container>
</container>

CSS

html,
body {
  height: 100%;
  margin: 0;
}

container.ctop {
    display: flex;
    border: 1px solid #cbd5e0;
    height: 100%;
    width: 100%;
}

container.cleft {
    display: flex;
    width: 75%;
    padding: 1em;
}

container.cright {
    display: flex;
    flex: 1 1 0%;
    padding: 1em;
    
}

container.fixh {
    height: min-content;
}

div.resizer {
    width: 3px;
    cursor: col-resize;
    height: 100%;
    background-color: #cbd5e0;
}

JavaScript

// Copyright © 2022 DocuSign, Inc.
// License: MIT Open Source https://opensource.org/licenses/MIT


/**
 * adjustColumns implements the adjustable columns support
 * Based on https://htmldom.dev/create-resizable-split-views/
*/
function adjustColumns() {
  const resizer = document.getElementById('dragMe');
  const leftSide = resizer.previousElementSibling;
  const rightSide = resizer.nextElementSibling;

  // The current position of mouse
  let x = 0;
  let y = 0;

  // Width of left side
  let leftWidth = 0;

  // Handle the mousedown event
  // that's triggered when user drags the resizer
  const mouseDownHandler = function(e) {
    // Get the current mouse position
    x = e.clientX;
    y = e.clientY;
    leftWidth = leftSide.getBoundingClientRect().width;

    // Attach the listeners to `document`
    document.addEventListener('mousemove', mouseMoveHandler);
    document.addEventListener('mouseup', mouseUpHandler);
  }

  const mouseMoveHandler = function(e) {
    document.body.style.cursor = 'col-resize';
    leftSide.style.userSelect = 'none';
    leftSide.style.pointerEvents = 'none';

    rightSide.style.userSelect = 'none';
    rightSide.style.pointerEvents = 'none';

    // How far the mouse has been moved
    const dx = e.clientX - x;
    const dy = e.clientY - y;

    const newLeftWidth = ((leftWidth + dx) * 100) /
    resizer.parentNode.getBoundingClientRect().width;
    leftSide.style.width = `${newLeftWidth}%`;
  }

  const mouseUpHandler = function() {
    resizer.style.removeProperty('cursor');
    document.body.style.removeProperty('cursor');

    leftSide.style.removeProperty('user-select');
    leftSide.style.removeProperty('pointer-events');

    rightSide.style.removeProperty('user-select');
    rightSide.style.removeProperty('pointer-events');

    // Remove the handlers of `mousemove` and `mouseup`
    document.removeEventListener('mousemove', mouseMoveHandler);
    document.removeEventListener('mouseup', mouseUpHandler);
  }
  
  //...