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;

`;