Div get bottom position instead of top - css

Question

I don't understand why my div under "Rechercher par" is on the bottom of the row and not on top.
Here's my html:
<div class="col-md-5">
<h5 class="margin-bottom-null"><span class="widget-title">Rechercher par</span></h5>
<div class="label-ombrage"></div>
<div class="div-inline">
<div><img src="Content/bullet-empty.png" alt=""><span class="choice-search-item">CRÉEZ UN COMPTE</span></div>
<div><img src="Content/bullet-empty.png" alt=""><span class="choice-search-item">VOS CRITÈRES DE RECHERCHES</span></div>
<div><img src="Content/bullet-empty.png" alt=""><span class="choice-search-item">INFOS SUR LE SITE</span></div>
</div>
<div class="line-separator div-inline pull-right"></div>
</div>
And the fiddle:
http://jsfiddle.net/4sfkc/1/
.label-ombrage {
width: 60px;
height: 256px;
display: inline-block;
background-color:#cbcbcb;
}
.widget-title {
color: #659900; /* text color */
font-family: "Dosis";
font-size: 1.5em;
font-weight: bold;
}
h5 {
padding-left: 30px;
}
.bottom-buffer-medium {
margin-bottom: 30px;
}
.div-inline {
display: inline-block;
}
.line-separator {
width: 1px;
height: 256px;
/*background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMjM2IiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9ImhhdDAiIGdyYWRpZW50VW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiB4MT0iNTAlIiB5MT0iMTAwJSIgeDI9IjUwJSIgeTI9Ii0xLjQyMTA4NTQ3MTUyMDJlLTE0JSI+CjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgo8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2NiY2JjYiIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIyMzYiIGZpbGw9InVybCgjaGF0MCkiIC8+Cjwvc3ZnPg==);*/ /* gradient overlay */
background-image: -moz-linear-gradient(bottom, #fff 0%, #cbcbcb 50%, #fff 100%); /* gradient overlay */
background-image: -o-linear-gradient(bottom, #fff 0%, #cbcbcb 50%, #fff 100%); /* gradient overlay */
background-image: -webkit-linear-gradient(bottom, #fff 0%, #cbcbcb 50%, #fff 100%); /* gradient overlay */
background-image: linear-gradient(bottom, #fff 0%, #cbcbcb 50%, #fff 100%); /* gradient overlay */
}
.border-bottom {
border-bottom: #cbcbcb 1px solid;
}
.margin-bottom-ligh {
margin-bottom: 10px;
padding-bottom: 10px;
}
.margin-bottom-null {
margin-bottom: 0;
}
.link-utility {
color: #999; /* text color */
font-family: "Dosis";
font-size: 14px;
margin-left: 15px;
}
.choice-search-item {
color: #999; /* text color */
font-family: "Dosis";
font-size: 22px;
font-weight: bold;
}
.bullet-img {
height: 31px;
background: url(../Content/recherche_bullet.png) 0 31px !important;
}
.active-bullet .bullet-img {
height: 31px;
background: url(../Content/recherche_bullet.png) 0 0 !important;
}
What's I'm looking for is to position the div with content "Vos critères de recherche ..." on the top, the div class="div-inline" in the code upper.
I use Bootstrap 3.

Answer 1

Add vertical-align: top; on .div-inline