Resizable split pane
Two side-by-side panels separated by a divider you can drag to give one panel more room and the other less.
See it
What it is
A resizable split pane divides one workspace into adjacent panels with a gutter the user can drag. Moving the gutter gives one pane more room and takes the same amount from its neighbor. Code editors, database tools, and mail clients use the pattern: VS Code alone lets you drag the lines between the file tree, the editor, and the terminal. The useful balance depends on the task and the screen.
Reach for one when both panes must stay visible but their ideal widths vary: a file tree beside an editor, a message list beside a reader, or a preview beside controls. Set sensible minimums, offer a quick way to collapse or reset a pane, and remember the chosen size when returning to the workspace.
Gotcha: a 1px divider is visible but almost impossible to grab. Give the gutter a wider invisible hit area, change the cursor, and capture the pointer so a fast drag does not drop outside it. The separator also needs keyboard controls and must stop before either pane becomes unusable.
Ask AI for it
Build a horizontal resizable split pane with CSS Grid and the Pointer Events API. Use columns 'minmax(240px, var(--left-width)) 8px minmax(320px, 1fr)', call setPointerCapture() on pointerdown, and update --left-width while dragging. Render the gutter as role='separator' with tabIndex={0}, aria-orientation='vertical', aria-label='Resize panels', aria-valuemin, aria-valuemax, and aria-valuenow. Let Left and Right arrows resize by 10px, Home and End jump to the limits, double-click reset to 40%, and persist the percentage in localStorage.