Split
.split
Split — a main column and a companion beside it, until there is no room.
Examples
<div class="split">
<div class="stack">
<div class="field">
<label class="field-label" for="sp-text">Text</label>
<input class="input" id="sp-text" value="https://example.com" />
</div>
<div class="field">
<label class="field-label" for="sp-size">Size</label>
<input class="range" id="sp-size" type="range" value="60" />
</div>
<div class="field">
<label class="field-label" for="sp-level">Correction</label>
<select class="select" id="sp-level"><option>Medium</option></select>
</div>
</div>
<aside class="card">
<div class="card-body">
<p class="card-title">Preview</p>
<p>Stays beside the controls until the row cannot hold both.</p>
</div>
</aside>
</div>No media query anywhere. The main column keeps 60% of the row and the companion wraps under it when it no longer fits — so the same markup is right inside a drawer, a card or a full page, which a min-width query never is.
Drag the stage narrow and watch it fold.
The main column is still the first child, and still the first thing read when the two stack.
Only the painted order changes.
<div class="split split-aside-first">
<div class="stack">
<p>The main column is still the first child, and still the first thing
read when the two stack.</p>
<p>Only the painted order changes.</p>
</div>
<aside class="card">On the leading side.</aside>
</div>Source order is reading order, so the class reverses the painting and reverses the wrapped order back with it.
Setting flex-direction alone would put the companion first on a wide screen and last on a narrow one, which is the shape of bug you only find by listening to the page.
Tokens 3
Level 2, declared on .split itself. Set any of them on that selector to restyle this utility without touching the skin.
| Token | Default |
|---|---|
| --split-aside-size | 22rem |
| --split-gap | var(--space-10) |
| --split-threshold | 60% |
Variants and states
Variants
None. It is one shape, and the page does the rest.
Inside it
.split-aside-first
State it reads
None.
src/css/utilities/split.css · npx mostlycss add split