Description list alignment

The <dl> element represents a description list. The element encloses a list of groups of terms (specified using the <dt> element) and descriptions (provided by <dd> elements). Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs).

dl {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.5rem 1rem;
}  
<dl>
  <dt>Goblin</dt>
  <dd>A race of small and numerous goblinoids.</dd>
  <dt>Owlbear</dt>
  <dd>A large magical or fey beast.</dd>
  <dt>Mind flayer</dt>
  <dd>Sadistic aberrations with powerful psionic abilities.</dd>
</dl>

Thanks to the awesome Andy Bell for the trick.