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

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.