The Split Component
The layout challenge that is as old as the web itself is putting two items next to each other. In this lesson, you will learn how to build the Split primitive to solve this problem.
For the longest time, floats were the go-to tool for putting two things next to each other. Unfortunately, since this is not what floats were designed for, this created as many problems as it solved. Luckily, modern CSS makes this much easier to solve.
The problem: Form SideBar#
In this lesson, we are going to build this widget:

Similar to the Stack primitive, we want a gutter in between the two parts. Unlike the Stack component, we need to be able to split the two children into fractional parts.
The solution#
Let's start with the basic markup. (You can follow along with the code by forking this codesandbox starter project):
export default function FormSideBar() {
return (
<div>
<div>
<h2>Personal Information</h2>
<span>The information you provide will be displayed publicly.</span>
</div>
<Form />
</div>
);
}
And this is how it looks:

Knowing that the h2
and span
will both need to be a sibling of the Form
component, I have pre-emptively wrapped both of those in a div
. Now the outer div
is the sibling of the Form
.
(Don't worry about the Form
component, we will be tackling that in the next lesson. All you need to know about the Form
component is that is structured much the same way as the h2
and span
. It's a bunch of inputs
wrapped in a div
.)
To build our Split primitive, we can take all the code from our Stack component, plus a little extra:
const Split = styled.div`
display: grid;
gap: ${(props) => spacingMap[props.gutter] ?? spacingMap.lg};
grid-template-columns: 1fr 1fr;
`;
This page is a preview of Composing Layouts in React