Split

fraction is the first column's share. auto sizes the first column to its content and gives the rest to the second. auto-end mirrors that: the last column sizes to its content while the first takes the rest. Below the stackBelow width the columns stack. The default sm is 640px of the Split's own width.

<Split fraction="1/2">
	<div>First</div>
	<div>Second</div>
</Split>

reverse swaps the columns with CSS order. The DOM is untouched, so screen readers and Tab order still follow source order. This is useful for alternating media and text rows.

<!-- reverse swaps the columns visually only; DOM, reading, and focus order are unchanged -->
<Split fraction="1/3" reverse>
	<div>DOM first (visual right)</div>
	<div>DOM second (visual left)</div>
</Split>

The Split stacks when its own width drops under the chosen width token (sm 640px, md 968px, lg 1200px). The threshold resolves through var(--hz-width-*), so overriding those tokens (globally or on any ancestor) changes when it stacks. none never stacks, no matter how narrow the Split gets. Use the slider to cross the threshold.

<Split stackBelow="sm">
	<div>First</div>
	<div>Second</div>
</Split>

gap is the space between the two columns, and between the stacked rows below the stackBelow width. The tinted zone is the Split; the space between its edge and the panes is the padding. padding applies on both axes; paddingInline and paddingBlock override one axis and win where set. Both stay correct in RTL and vertical writing modes. The padding sits on the split root, so stackBelow measures the padded-down width. near and away are the density distances: context-aware values that tighten inside data-density-shift regions.

<Split gap="md" padding="md">…</Split>
<Split gap="md" paddingInline="md">…</Split>
<Split gap="md" paddingBlock="md">…</Split>