This example is a 3-column horizontal PanelGroup. Click/touch the empty space between the panels and drag to resize. Arrow keys can also be used to resize panels.
These panels use the minSize property to prevent them from being resized smaller than a minimal percentage of the overall group.
1 <PanelGroup direction="horizontal">
2 <Panel defaultSize={30} minSize={20}>
3 left
4 </Panel>
5 <PanelResizeHandle />
6 <Panel minSize={30}>
7 middle
8 </Panel>
9 <PanelResizeHandle />
10 <Panel defaultSize={30} minSize={20}>
11 right
12 </Panel>
13 </PanelGroup>