This video is available to students only

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:

Form Sidebar

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):

And this is how it looks:

Form Sidebar step 0

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:


This page is a preview of Composing Layouts in React

Start a new discussion. All notification go to the author.