Sidecar

The .sidecar class creates a layout where two items are side-by-side. One of them remains the same size (the “sidecar”), while the other one expands up-or-down to fill the remaining space.

If needed, the items wrap, creating a stacked layout.

Sidecar Start

By default, the .sidecar layout treats the first item as the “sidecar,” and scales the second item.

This is particular useful when you have an icon or image next to some text, like in a .callout.

<div class="sidecar">
	<div style="width: 9em">👋</div>
	<div>Hello there!</div>
</div>

Sidecar End

If you want the second item to be the “sidecar” element, use .sidecar-end instead.

This is useful for things like search form fields.

<div class="sidecar-end">
	<div>
		<label class="visually-hidden" for="search">Search this site</label>
		<input type="text" id="search">
	</div>
	<div>
		<button class="btn-block primary">Search</button>
	</div>
</div>

Gap

The .sidecar and .sidecar-end classes uses display: flex under-the-hood.

You can adjust the amount of spacing between items using the .gap-* utility classes.

.gap-4xs

.gap-6xl

<div class="sidecar gap-4xs">
	<!-- ... -->
</div>

<div class="sidecar gap-6xl">
	<!-- ... -->
</div>

Align Items

By default, items in a .sidecar or .sidecar-end layout stretch to match the tallest child element.

You can adjust the vertical alignment with the .align-* utility classes.

.align-start

.align-center

.align-end

<div class="sidecar align-start">
	<!-- ... -->
</div>

<div class="sidecar align-center">
	<!-- ... -->
</div>

<div class="sidecar align-end">
	<!-- ... -->
</div>