Recipe: Resizable split-pane layout

A draggable vertical divider between two panels using pure CSS grid and a minimal resize handle.

How it works

• CSS Grid defines three columns: two flexible panels and a fixed 6px gutter.
• The gutter uses cursor-col-resize for affordance.
• Replace fixed 1fr values with CSS custom properties driven by pointer events for true resizing.

The code

<div
  className="grid h-[420px] overflow-hidden rounded-lg"
  style={{ gridTemplateColumns: "1fr 6px 1fr" }}
>
  <div className="bg-zinc-900">
    {/* Left content */}
  </div>
  <div className="cursor-col-resize bg-violet-500
    hover:bg-pink-400 transition-colors" />
  <div className="bg-zinc-900">
    {/* Right content */}
  </div>
</div>

For a fully interactive version with pointer events and persisted ratios, see the SplitPane component docs.