Split layout

Split Layout is a simple mechanism which arranges UI elements at opposite ends of a container. It can be oriented vertical or horizontal orientation, and is typically used to provide visual hierarchy for controls, such as buttons or toolbars.

Also known as: CSS Flexbox, Responsive Layout
Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected

When building a sub-section of a page using a SplitLayout, apply semantic HTML. This means using the correct HTML elements for their intended purpose as much as possible.

SplitLayout supports semantic HTML with the as prop. This renders the appropriate HTML instead of a plain div.