How to vertical align dt tags in relation to its dd tags?

Question

I have this html:

<dl>
    <dt><label for='txaText'>Text</label></dt>
    <dd><textarea id='txaText'></textarea></dd>
</dl>

and this css:

dt {
  float: left;
  text-align: right;
  width: 30%;
  padding-right:5px;
}
dd {
  width: 70%;
  margin: 0;
}

But I get this:

And I wanted this:

How can I achieve this vertical alignment of the dt tag in relation to its respective dd tag? Can I do this without horrible hacks like creating divs or specifying the height in pixels for each label?

Answer 1

I think I came up with a solution that you may like, you can set your elements to display:table-cell and vertical-align:middle to align them.

CSS:

dl{
   border: 1px solid red;
}

dt {
  display:table-cell;
  vertical-align:middle;
  width: 30%;
  padding-right:5px;
}
dd {
  display:table-cell;
  vertical-align:middle;
  width: 70%;
  margin: 0;
}

Updated CODEPEN DEMO for you.