Div being pushed down by invisible force - html

Question

I am trying to have a thumbnail grid. Each thumbnail can have either one of two different height, but I want the whole row to have the same height
As can be seen, because the last two thumbnails are higher, the rest get's pushed down.
When I inspect it with Google Devtools, no padding or margin has been added, they're just being forced down somehow
CSS:
.video {
display: inline-block;
width: 220px;
height: 250px;
margin: 0 0 15px 15px;
h4 {
margin-top: 5px;
}
.thumbnail {
padding: 0px;
border: none;
background: none;
// box-shadow: 5px 5px 15px -6px;
.caption {
word-break: break-all;
}
}
}
HTML:
<div class="row">
<div class="col-xs-12">
<div class="videoList">
<div class="video">
<div class="item">
<div class="thumbnail">
<img src="https://i.ytimg.com/s_vi/YXQdrjJiQjY/hqdefault.jpg?sqp=CNjOtKgF&rs=AOn4CLAx8dW9kP4W6XdVeCR73QmLOEOdNw" alt="thumbnail">
<div class="caption">
<h4><span class="title">My Slideshow</span></h4>
<ul class="list-inline">
<li>1 views</li>
<li><i class="fa fa-thumbs-o-up"></i> 0</li>
<li><i class="fa fa-thumbs-o-down"></i> 0</li>
<li><i class="fa fa-comment-o"></i> 0</li>
</ul>
</div>
</div>
</div>
</div>
<div class="video">
<div class="item">
<div class="thumbnail">
<img src="https://i.ytimg.com/s_vi/Ii7FfPgDU6A/hqdefault.jpg?sqp=CNjOtKgF&rs=AOn4CLAU-ezif1lm8rXcVNRePjnfVhGvTA" alt="thumbnail">
<div class="caption">
<h4><span class="title">My Slideshow</span></h4>
<ul class="list-inline">
<li>1 views</li>
<li><i class="fa fa-thumbs-o-up"></i> 0</li>
<li><i class="fa fa-thumbs-o-down"></i> 0</li>
<li><i class="fa fa-comment-o"></i> 0</li>
</ul>
</div>
</div>
</div>
</div>
<div class="video">
<div class="item">
<div class="thumbnail">
<img src="https://i.ytimg.com/s_vi/GB9syW4zI2o/hqdefault.jpg?sqp=CNjOtKgF&rs=AOn4CLDbBXF49SYPGVhCKJ6QqYcwP3xpEA" alt="thumbnail">
<div class="caption">
<h4><span class="title">My Slideshow</span></h4>
<ul class="list-inline">
<li>0 views</li>
<li><i class="fa fa-thumbs-o-up"></i> 0</li>
<li><i class="fa fa-thumbs-o-down"></i> 0</li>
<li><i class="fa fa-comment-o"></i> 0</li>
</ul>
</div>
</div>
</div>
</div>
<div class="video">
<div class="item">
<div class="thumbnail">
<img src="https://i.ytimg.com/s_vi/b7dK2DEMkyI/hqdefault.jpg?sqp=CNjOtKgF&rs=AOn4CLC6UBWeTho-vmmSozu-CG1Zno88vQ" alt="thumbnail">
<div class="caption">
<h4><span class="title">My Slideshow</span></h4>
<ul class="list-inline">
<li>1 views</li>
<li><i class="fa fa-thumbs-o-up"></i> 0</li>
<li><i class="fa fa-thumbs-o-down"></i> 0</li>
<li><i class="fa fa-comment-o"></i> 0</li>
</ul>
</div>
</div>
</div>
</div>
<div class="video">
<div class="item">
<div class="thumbnail">
*<img src="https://i.ytimg.com/s_vi/9nizjdeEecE/hqdefault.jpg?sqp=CNjOtKgF&rs=AOn4CLC5VfvmjPALw-K5COknauUE2fTORg" alt="thumbnail">
<div class="caption">
<h4><span class="title">John Lennon - Imagine (rock instrumenta...</span></h4>
<ul class="list-inline">
<li>38 views</li>
<li><i class="fa fa-thumbs-o-up"></i> 0</li>
<li><i class="fa fa-thumbs-o-down"></i> 3</li>
<li><i class="fa fa-comment-o"></i> 0</li>
</ul>
</div>
</div>
</div>
</div>
Any help is much appreciated

Answer 1

It's because other divs have longer titles than others and your div are aligning them bottom by default.To fix this problem you'll need to add vertical-align:top; to your class .item, if not I think the class is .thumbnail
.item {
vertical-align:top;
}

Answer 2

add vertical align to video class:
vertical-align:top