왼쪽에 제목, 오른쪽에는 본문 형태로 레이아웃을 grid로 간단하게 만들 수 있다.
거기다 표현이 상당히 유연해서 대단히 좋아 보인다.

source

<dl>
  <dt>노벨 수상자 평균 IQ</dt>
  <dd>145</dd>
  <dt>노벨상 발표일</dt>
  <dd>매년 10월</dd>
  <dt>노벨상 시상식</dt>
  <dd>매년 12월 10일</dd>
  <dt>노벨상 시상 장소</dt>
  <dd>스웨덴(나머지)/노르웨이(평화상)</dd>
</dl>

<style lang="scss">
dl {
  display: grid;
  grid-template: auto / 180px 1fr;
  border: 1px solid hsl(0 0% 0% / 15%);
  row-gap: 8px;
  column-gap: 8px;
  padding: 16px;
  dt {
    font-weight: 600;
  }
  dd {
    margin-left: 0;
  }
}
</style>

codepen

출처
https://gist.github.com/LeaVerou/12b1d1e078510900c7ab206da1a0ff2e