Alignment

Positioning elements along common edges/axes.

html

<div class="al-wrap">
  <p class="al-text" style="text-align:left;">Aligned to the left edge.</p>
  <div class="al-row" style="align-items:center;gap:10px;">
    <span class="al-chip" style="background:#BFD9F2;height:28px;">A</span>
    <span class="al-chip" style="background:#BFD9F2;height:44px;">B</span>
    <span class="al-chip" style="background:#BFD9F2;height:36px;">C</span>
  </div>
  <p class="al-caption">text-align: left &middot; align-items: center &middot; gap 10px</p>
</div>
<style>
.al-wrap { font: 14px/1.5 system-ui, sans-serif; color: #241430; width: 300px; }
.al-text { margin: 0 0 14px; background: #FAF7F2; border: 1.5px dashed #24143055; border-radius: 8px; padding: 10px; box-sizing: border-box; }
.al-row { display: flex; background: #FAF7F2; border: 1.5px dashed #24143055; border-radius: 8px; padding: 10px; box-sizing: border-box; min-height: 60px; }
.al-chip { width: 34px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.al-caption { margin: 10px 0 0; font-size: 12px; color: #241430cc; }
</style>

tailwind

<div class="font-sans text-[#241430] w-[300px]">
  <p class="m-0 mb-3.5 bg-[#FAF7F2] border-[1.5px] border-dashed border-[#24143055] rounded-lg p-2.5 box-border" style="text-align:left;">Aligned to the left edge.</p>
  <div class="flex bg-[#FAF7F2] border-[1.5px] border-dashed border-[#24143055] rounded-lg p-2.5 box-border min-h-[60px]" style="align-items:center;gap:10px;">
    <span class="w-[34px] rounded-md flex items-center justify-center font-bold" style="background:#BFD9F2;height:28px;">A</span>
    <span class="w-[34px] rounded-md flex items-center justify-center font-bold" style="background:#BFD9F2;height:44px;">B</span>
    <span class="w-[34px] rounded-md flex items-center justify-center font-bold" style="background:#BFD9F2;height:36px;">C</span>
  </div>
  <p class="mt-2.5 text-xs text-[#241430]/80">text-align: left &middot; align-items: center &middot; gap 10px</p>
</div>

react

export function Alignment({
  textAlign = "left",
  itemsAlign = "center",
  gap = 10,
  accent = "#BFD9F2",
}) {
  const chip = { width: 34, background: accent, borderRadius: 6, display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 700 };
  return (
    <div style={{ font: "14px/1.5 system-ui, sans-serif", color: "#241430", width: 300 }}>
      <p style={{ margin: "0 0 14px", textAlign, background: "#FAF7F2", border: "1.5px dashed #24143055", borderRadius: 8, padding: 10, boxSizing: "border-box" }}>
        Aligned to the {textAlign} edge.
      </p>
      <div style={{ display: "flex", alignItems: itemsAlign, gap, background: "#FAF7F2", border: "1.5px dashed #24143055", borderRadius: 8, padding: 10, boxSizing: "border-box", minHeight: 60 }}>
        <span style={{ ...chip, height: 28 }}>A</span>
        <span style={{ ...chip, height: 44 }}>B</span>
        <span style={{ ...chip, height: 36 }}>C</span>
      </div>
      <p style={{ marginTop: 10, fontSize: 12, color: "#241430cc" }}>text-align: {textAlign} &middot; align-items: {itemsAlign} &middot; gap {gap}px</p>
    </div>
  );
}