Uneven horizontally scrolling div with white-space: normal - html

Question

I'm trying to make a horizontally scrolling div with various other divs inside of it.
<div class="slider">
<div class="item">
<div class="info">
<h1>Title</h1>
</div>
</div>
<div class="item">
<div class="info">
<h1>This is a really long title</h1>
</div>
</div>
<div class="item">
<div class="info">
<h1>Title</h1>
</div>
</div>
</div>
.slider {
white-space: nowrap;
overflow: auto;
}
.item {
display: inline-block;
position: relative;
width: 200px;
height: 150px;
margin: 10px;
background: grey;
}
.info {
position: relative;
height: 100%;
color: #fff;
white-space: normal;
}
The problem I have is that each div has a title, and when it has white-space: normal set and the title is multiple lines, it throws off the alignment of the other divs.
Here is an example of the problem in action: http://jsfiddle.net/ur16gj3m/
Is there a way to get around this? If I change .info to position: absolute, it works. I'd prefer to not use absolute positioning though.

Answer 1

The problem is caused by the default vertical-align: baseline property on inline elements. This causes the blocks to line themselves up with the baseline of the text. This is a problem when the text wraps as the baseline is pushed down.
Set vertical-align: top on .item
Working Example
.slider {
white-space: nowrap;
overflow: auto;
}
.item {
display: inline-block;
position: relative;
width: 200px;
height: 150px;
margin: 10px;
background: grey;
vertical-align: top;
}
.info {
position: relative;
height: 100%;
color: #fff;
white-space: normal;
}
<div class="slider">
<div class="item">
<div class="info">
<h1>Title</h1>
</div>
</div>
<div class="item">
<div class="info">
<h1>This is a really long title</h1>
</div>
</div>
<div class="item">
<div class="info">
<h1>Title</h1>
</div>
</div>
</div>