内联块元素不与省略号溢出垂直对齐

我正在显示label,input和div元素内联,期望它们垂直对齐,这最初是有效的.

但是,当我试图允许div内容溢出省略号时,它们不再垂直对齐

注意:这是在Chrome 46.02490.86中观察到的

p {color:red;}
input,
label,
div {
  width: 50px;
  display: inline-block;
  margin-left: 5px;
}
label {
  text-align: right;
}
.longdesc {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
 

Name:

Desc:
Short

Name:

Desc:
Longer Description

    In the second example "Long" is higher up

p {color:red;}
input,
label,
div {
  width: 50px;
  display: inline-block;
  margin-left: 5px;
  vertical-align: top;
}
label {
  text-align: right;
}
.longdesc {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
 

Name:

Desc:
Short

Name:

Desc:
Longer Description

    In the second example "Long" is higher up