Two regions, one negotiable boundary

The sidebar and the canvas, the list and the detail, the editor and the preview. The split is a percentage, so it survives container resizes, and panes clip their content rather than growing the page. The divider is a real separator: focusable, draggable with pointer capture, and nudged by arrow keys.

Horizontal

Drag the divider, or focus it and use the arrow keys. Hold Shift for bigger steps; Home and End jump to the limits.

First pane
Second pane

Vertical

The same component stacked. The separator reports its orientation and the arrow keys follow it: up and down instead of left and right.

Output
Console

Bounded sidebar

minSplit and maxSplit fence the drag, so a sidebar can be squeezed but never collapsed away. This one starts at a quarter and moves between 15 and 40 percent.

OverviewMembersBillingSettings
Canvas

Scrolling regions

A region that should scroll brings its own focusable scroll container inside the pane, so keyboard users can reach it. The long list here scrolls against a fixed neighbour instead of stretching the layout.

List row 1List row 2List row 3List row 4List row 5List row 6List row 7List row 8List row 9List row 10List row 11List row 12List row 13List row 14List row 15List row 16List row 17List row 18List row 19List row 20List row 21List row 22List row 23List row 24
Detail