Key-value list

Quick implementation

.kv-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  border-top: 1px solid var(--card-border);
}
.kv-val {
  font-family: ui-monospace, monospace;
  text-align: right;
}

Prompt this to your LLM

Use dl/dt/dd for semantics.

Build a key-value panel.

Wrappers: .key-value-demo, .key-value-card.
Semantic dl with .kv-row wrappers containing dt.kv-key and dd.kv-val.
Section title as h2.kv-head. Right-align values in monospace.

Return HTML + CSS.

Why this matters in 2026

Observability UIs are mostly labeled metrics; a tight key-value table beats free-form paragraphs for scanning.

The logic

Two-column grid keeps keys left-heavy while values align for diffing across rows.

Accessibility & performance

Native description lists expose term/definition relationships; avoid turning this into a table unless sorting matters.