Split profile

Row layout with align-items: center and nested gap

Jordan Lee

Product designer · trails on weekends · based in Manila

HTML

Flexbox

Research

What Flexbox is doing

.split — flex-direction: row, align-items: center, gap: 24px
.avatar — square size + border-radius: 50% (rule 33)
.split-copy — column stack for name, bio, chips, and buttons
.chip-row — horizontal flex with gap for pill tags

Why align-items matters here

Without align-items: center, a short text column can sit at the top of a tall avatar. Centering on the cross axis keeps the photo and copy visually paired.

Portrait via Unsplash. Credit the photographer when you publish.

Important HTML

Split layouts pair copy with a media pane.

<div class="split">
  <div class="split-copy">…</div>
  <div class="split-media">…</div>
</div>

Important CSS

Row flex aligns the two panes.

.split {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
}