HTML中dl元素的高度问题

dl元素通常用来创建一个描述列表，但是在我使用的过程中发现了一个小问题。

定义及用法

在MDN中 <dl> 元素的定义是：一个包含术语定义以及描述的列表，通常用于展示词汇表或者元数据 (键-值对列表)。
<dl> 元素有两个特有的子元素，分别是 <dt> 和 <dd> ， <dt> 用于在一个定义列表中声明一个术语 ， <dd> 用来指明一个描述列表 ( <dl> ) 元素中一个术语的描述。

<dl>
    <dt>Name</dt>    
    <dd>Godzilla</dd>
    <dt>Born</dt>
    <dd>1952</dd>
    <dt>Birthplace</dt>
    <dd>Japan</dd>
    <dt>Color</dt>
    <dd>Green</dd>
</dl> 

这样我们就得到了一个包含术语及其描述的列表：

给<dl>元素添加样式

在上面的展示中， <dl> 元素有其默认的样式，但是我的页面上想要展示如下所示的列表：

于是，我就给 <dl>列表添加了一些CSS样式：

dl {
  width: 400px;
  border: 1px solid red;
  box-sizing: border-box;
  display: inline-block;
}
dt, dd {
  margin: 0;
  padding: 0;
  float: left;
  width: 50%;
}

问题

结果呢，就出现了文章开头时所说的小问题：

描述列表的样式完全乱了，列表的第一行好像还可以，在第二行的 <dt> 之前出现了莫明其妙的空白，所后的几行也都出现了问题，这是为什么呢？
我们使用「border大法」来看一看到底为什么出现了这种情况，我为 <dl> 元素中的所有元素都添加了 border ，并且稍微修改了 <dt> 和 <dd> 的宽度。

dl {
  width: 400px;
}
dt, dd {
  margin: 0;
  padding: 0;
  float: left;
  width: 49%;
  border: 1px solid red;
}

出现的结果是这样的：

想必大家都看到了，定义术语的 <dt> 元素和描述术语的 <dd> 元素的高度不同，因此第二行的邮箱就被挤到了 <dd> 元素本来的位置上，其后的元素也被依次挤了下去。

解决

造成这个问题的原因是 <dt> 和 <dd> 自适应高度，而纯数字的 <dd> 高度要低于汉字内容的 <dt> ，因此有两种方法解决：
1 .既然纯数字的高度和带汉字的文本的高度不同，那我们在两边都加上汉字不就行了嘛：

完美～
讲道理，皮这一下很开心...

2 .正常人都不会用上边的方法的好吗，不慌，还有一种方法：给两边固定的高度。

dl {
  width: 400px;
}
dt, dd {
  font-size: 16px;
  padding: 0;
  margin: 0;
  float: left;
  width: 49%;
  border: 1px solid red;
  height: 30px;
  line-height: 30px;
}

给两边都加上30px的高度，并且将行高设置为与高度相同，使文本垂直居中。

解决～

如果各位同学还有更好的解决方法，还请不吝赐教。
以上。