2 row 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="c">
  <!-- top element -->
  <container class="ctop">
    <container class="fixh">
      <h3>
      Top
      </h3>
Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl. Swab barque interloper chantey doubloon starboard grog black jack gangway rutters.

Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.

Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.
    </container>
  </container>

  <!-- The resizer -->
  <div class="resizer" id="dragMe"></div>
  <!-- Right element -->
  <container class="cbottom">
    <container class="fixh">
      <h3>
        Log
      </h3>
      <p>
        You can adjust the height of the sections.
      </p>
      Prow scuttle parrel provost Sail ho shrouds spirits boom mizzenmast yardarm. Pinnace holystone mizzenmast quarter crow's nest nipperkin grog yardarm hempen halter furl. Swab barque interloper chantey doubloon starboard grog black jack gangway rutters.

Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.

Trysail Sail ho Corsair red ensign hulk smartly boom...

CSS

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

container.c {
  display: flex;
  flex: 1;
  flex-direction: column;
  border: 1px solid #cbd5e0;
  height: 100%;
  width: 100%;
}

container.ctop {
  display: flex;
  height: 25rem;
  padding: 1em;
  overflow-y: scroll;
}

container.cbottom {
  display: flex;
  flex: 1;
  padding: 1em;
  overflow-y: scroll;
}

container.fixh {
  width: 100%;
}

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

JavaScript

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


/**
 * adjustColumns implements the adjustable rows support
 * Based on https://htmldom.dev/create-resizable-split-views/
*/
function adjustRows() {
  const resizer = document.getElementById('dragMe');
  const topSide = resizer.previousElementSibling;
  const bottomSide = resizer.nextElementSibling;
  const prevSibling = resizer.previousElementSibling;
  let prevSiblingHeight = 0;
  
  // The current position of mouse
  let x = 0;
  let y = 0;

  // Height of top side
  let topHeight = 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;
    const rect = prevSibling.getBoundingClientRect();
    prevSiblingHeight = rect.height;

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

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

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

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

    const h = ((prevSiblingHeight + dy) * 100) / resizer.parentNode.getBoundingClientRect().height;
    prevSibling.style.height = `${h}%`;
  }

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

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

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

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