Split

fraction is the first column's share. auto sizes the first column to its content and gives the rest to the second. Below the stackBelow width (default sm, 640px of the Split's own width) the columns stack.

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

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

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

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

<Split fraction="3/4">
	<div>First</div>
	<div>Second</div>
</Split>

<Split fraction="auto">
	<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) retunes when it stacks. Use the slider to cross the threshold.

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

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

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

The tinted zone is the Split; the space between its edge and the panes is the padding. It sits on the split root, so stackBelow measures the padded-down width. padding applies on both axes; paddingInline / paddingBlock override one axis and win where set. The axis names are the CSS logical properties, so they stay correct in RTL and vertical writing modes. See Spacing & Sizing.

<Split padding="none">…</Split>
<Split paddingInline="none">…</Split>
<Split paddingBlock="none">…</Split>

<Split padding="sm">…</Split>
<Split paddingInline="sm">…</Split>
<Split paddingBlock="sm">…</Split>

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

<Split padding="lg">…</Split>
<Split paddingInline="lg">…</Split>
<Split paddingBlock="lg">…</Split>

<Split padding="near">…</Split>
<Split paddingInline="near">…</Split>
<Split paddingBlock="near">…</Split>

<Split padding="away">…</Split>
<Split paddingInline="away">…</Split>
<Split paddingBlock="away">…</Split>