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.
Let's start with the basic markup. (You can follow along with the code by forking this codesandbox starter project):
And this is how it looks:
Knowing that the
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
(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
span. It's a bunch of
inputs wrapped in a
To build our Split primitive, we can take all the code from our Stack component, plus a little extra: