Split Pair Utility

Our split-pair utility is constructed as follows:

.split-pair {
  --split-pair-space: 2rem;

  display: flex;
  flex-wrap: wrap;
  align-items: var(--split-pair-align, center);
  margin: calc((var(--split-pair-space) / 2) * -1) 0 0 calc((var(--split-pair-space) / 2) * -1);
}

.split-pair > * {
  flex-grow: 1;
  flex-basis: calc((var(--split-pair-break, 48rem) - (100% - var(--split-pair-space))) * 999);
  padding: calc(var(--split-pair-space) / 2) 0 0 calc(var(--split-pair-space) / 2);
}

.split-pair > :nth-last-child(n + 3),
.split-pair > :nth-last-child(n + 3) ~ * {
  flex-basis: 100%;
}

Purpose

The split pair utility is a small utility to create a side-by-side layout that stacks at a specific breakpoint. Similar to our auto-grid utility, it allows us to control columns within a horizontal access. It uses flex instead of grid to give us various size of columns, for example one column that's 25% and one that fills the rest of the space. It also creates a gap that remains consistent both horizontally and vertically as the layout stacks.

Example

<article class="[ article ] [ split-pair ]">
  <div class="article__body"></div>
  <div class="article__sidebar"></div>
</article>

.article {
  --split-pair-space: 2rem;
}

.article__sidebar {
  max-width: 20rem;
}