Pair

Arranges items into two-column key–value pairs with equal row spacing.

<form method="get" class="o-pair">
	<label for="firstName">First name:</label>
	<input class="c-input" type="text" id="firstName">

	<label for="lastName">Last name:</label>
	<input class="c-input" type="text" id="lastName">		
</form>

Modifiers

Responsive

Stacks the items on smaller screens.

<form method="get" class="o-pair o-pair--responsive">
	<label for="firstName">First name:</label>
	<input class="c-input" type="text" id="firstName">

	<label for="lastName">Last name:</label>
	<input class="c-input" type="text" id="lastName">		
</form>

Gap

Set the gap between items.

<form method="get" class="o-pair o-pair--gap-sm">
	<label for="firstName">First name:</label>
	<input class="c-input" type="text" id="firstName">

	<label for="lastName">Last name:</label>
	<input class="c-input" type="text" id="lastName">		
</form>

<form method="get" class="o-pair o-pair--gap-lg">
	<label for="firstName">First name:</label>
	<input class="c-input" type="text" id="firstName">

	<label for="lastName">Last name:</label>
	<input class="c-input" type="text" id="lastName">		
</form>