SideBySide

The SideBySide component creates a responsive two-column layout that stacks on mobile and displays side-by-side on desktop (lg+). It uses three component files: SideBySide, Left, and Right.

Import

import { SideBySide, Left, Right } from '@mdx';

Props

SideBySide

Prop	Type	Default	Description
`showDivider`	`boolean`	`true`	Show a gradient divider between columns
`class`	`string`	—	Additional CSS classes

Left / Right

Prop	Type	Default	Description
`class`	`string`	—	Additional CSS classes
`centerVertical`	`boolean`	`false`	Vertically center the content

Usage

<SideBySide>
  <Left>
    Left column content (text, images, etc.)
  </Left>
  <Right centerVertical>
    Right column content, vertically centered.
  </Right>
</SideBySide>

Implementation Notes

Layout: Uses flex-col lg:flex-row. Each column (Left/Right) uses flex-1 min-w-0 for equal 50/50 width distribution. The min-w-0 prevents flex children from overflowing.

Divider: When enabled, an absolutely positioned gradient line renders:

Mobile: Hidden (display: none) to prevent overlap with stacked content
Desktop: Vertical line at horizontal center with a top-to-bottom fade gradient

Padding: Left has lg:pr-10 (right padding on desktop), Right has lg:pl-10 (left padding), creating space around the divider.

Source: src/components/mdx/SideBySide/SideBySide.astro, Left.astro, Right.astro