A splitter shares its room between panes, with a handle between every two. Drag a handle, or focus it and use the arrow keys. Sizes are percentages that add up to 100, and [(sizes)] binds them.
Each pane takes its first size, its minimum and its maximum in pixels, rems or percent. A collapsible pane folds away when dragged below half its minimum, or with Enter on its handle, and comes back at the size it had.
With storageKey, the sizes are kept in localStorage, so people find the layout as they left it on their next visit.
An editor
Files, code and a preview. The files and the preview fold away, the code keeps at least 30% of the width, and the sizes are saved.
export class App {}
// app.ts
Stacked panes
orientation="vertical" stacks the panes, and [(sizes)] reads their sizes as they change.
SELECT name, total FROM orders
3 rows
Sizes: 65% and 35%