How to vertically align dt tags with their 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 with its corresponding dd tag? Can I do this without horrible hacks like creating a div or determining 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 in display:table-celland vertical-align:middleto 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.

Answer 2

You can try this code.

html code:

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

and this css code:

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