Inline block elements don't vertically align with ellipsis overflow

Question

I am displaying label , input , and div elements inline, expecting them to align vertically, which works initially.

However, when I attempt to allow the div's contents to overflow with an ellipsis, they do not vertically align anymore

Note: This was observed in 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;
}
 

<label>Name:</label>
<input type='text' value='James'>
<label>Desc:</label>
<div>Short</div>
<hr />
<label>Name:</label>
<input type='text' value='James'>
<label>Desc:</label>
<div class='longdesc'>Longer Description</div>
<p>
    In the second example "Long" is higher up
</p>

How can I achieve the overflow effect without messing up the vertical alignment?

Answer 1

Add vertical-align: top to your inline-block elements:

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;
}
 

<label>Name:</label>
<input type='text' value='James'>
<label>Desc:</label>
<div>Short</div>
<hr />
<label>Name:</label>
<input type='text' value='James'>
<label>Desc:</label>
<div class='longdesc'>Longer Description</div>
<p>
    In the second example "Long" is higher up
</p>