Split layout

Also known as

CSS Flexbox, Responsive Layout

SplitLayout displays items in two separate areas at opposite ends of a container. You can define the container in a vertical or horizontal orientation.

When building a sub-section of a page using a split layout, it's important to use semantic HTML, which 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.