Una lista de definiciones, el drama.

dl.md

Problema

Dada la lista de definiciones de abajo:

<dl>
  <dt>x</dt>
  <dd>a</dd>
  <dd>b</dd>

  <dt>y</dt>
  <dd>c</dd>

  <dt>z</dt>
  <dd>d</dd>
</dl>

Parte 1

• Los títulos dt deben mostrarse a la izquierda
• Las descripciones dd deben mostrarse a la derecha

El resultado visual debe mostrarse como una tabla, títulos de un lado, descripciones al otro.

Parte 2

• Alinear los títulos dt verticalmente con relación a la fila que les corresponde

Como referencia, una tabla estándar cumple con la estructura visual: https://jsfiddle.net/tpfyoLqg/

El problema es mantener la misma estructura semántica sin cambios (o adiciones innecesarias) y alcanzar la misma estructura visual.