Resizable

// A session per group, since each one drags along its own axis.
let rowSession = new ResizeSession();
let columnSession = new ResizeSession();

<Resizable aria-label="Layout panes" data-resizable-group>
	<Resizable.Panel
		id="one"
		defaultSize={50}
		minSize={25}
		data-resizable-panel
		data-resizable-min="25"
		mix={[center(), weight("semibold")]}
	>
		One
	</Resizable.Panel>

	<Resizable.Handle
		aria-label="Resize the first pane"
		aria-controls="one stack"
		data-resizable-handle
		mix={[resizeHandle("horizontal", rowSession)]}
	/>

	<Resizable.Panel id="stack" defaultSize={50} minSize={25} data-resizable-panel>
		{/* A group nested in a panel splits that panel along the other axis; the
		    frame around it is the outer group's, so this one draws none of its own. */}
		<Resizable
			orientation="vertical"
			aria-label="Stacked panes"
			data-resizable-group
			style={{ border: "none", borderRadius: "0" }}
			mix={[bs("100%")]}
		>
			<Resizable.Panel
				id="two"
				defaultSize={25}
				minSize={15}
				data-resizable-panel
				data-resizable-min="15"
				mix={[center(), weight("semibold")]}
			>
				Two
			</Resizable.Panel>

			<Resizable.Handle
				aria-label="Resize the upper pane"
				aria-controls="two three"
				data-resizable-handle
				mix={[resizeHandle("vertical", columnSession)]}
			/>

			<Resizable.Panel
				id="three"
				defaultSize={75}
				minSize={15}
				data-resizable-panel
				data-resizable-min="15"
				mix={[center(), weight("semibold")]}
			>
				Three
			</Resizable.Panel>
		</Resizable>
	</Resizable.Panel>
</Resizable>