Description list alignment

Widely available Reference ↗

<dl> is the right structure for name–value groups. Grid can align terms and descriptions without replacing that relationship with a presentational table.

<dl class="specs">
  <dt>Display</dt><dd>6.1-inch OLED</dd>
  <dt>Weight</dt><dd>174 g</dd>
</dl>

.specs {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .5rem 1rem;
}

.specs dd {
  margin: 0;
}

This layout assumes one description after each term. More complex groups may need wrappers or a different grid strategy, while keeping the dt/dd semantics.