Div vertically align - html

Question

I have three <div> like this:
<div class="col-xs-12 col-md-4 ">
<img src="custom_images/logo3.png" />
</div>
<div class="col-xs-6 col-md-4 text-center">
<div class="input-group">
<input type="text" class="form-control header_search" placeholder="Search Here....." aria-describedby="basic-addon1">
<span class="input-group-addon search_span" id="basic-addon1" ><i class="fa fa-search "></i> </span>
</div>
<%--<div class="">
<input type="search" placeholder="Search Here...." />
<span style="background-color:#000;padding:10px;">
<img src="custom_images/search.png" /></span>
</div>--%>
</div>
<div class="col-xs-6 col-md-4 text-right">
<button class="cart_button"><span>Items in your cart</span> <span style="margin-left:25px;"><img src="custom_images/cart_item.png" /></span></button>
<span class="cart_items">15</span>
</div>
I am not able to vertically align them in a line. I want all of them to be like vertically-align: middle.
Here is how it looks right now:
Please help me into this.

Answer 1

I believe that the logo is of fixed height. You can use margin-top on the top <div> using this:
<div class="col-xs-6 col-md-4 text-center adjust-top-height">
<div class="input-group">
<input type="text" class="form-control header_search" placeholder="Search Here....." aria-describedby="basic-addon1">
<span class="input-group-addon search_span" id="basic-addon1" ><i class="fa fa-search "></i> </span>
</div>
<div class="">
<input type="search" placeholder="Search Here...." />
<span style="background-color:#000;padding:10px;">
<img src="custom_images/search.png" /></span>
</div>
</div>
<div class="col-xs-6 col-md-4 text-right adjust-top-height">
<button class="cart_button"><span>Items in your cart</span> <span style="margin-left:25px;"><img src="custom_images/cart_item.png" /></span></button>
<span class="cart_items">15</span>
</div>
And in the CSS
.adjust-top-height {margin-top: 15px;}

Answer 2

If you give the parent element the following CSS, you should be fine:
element{
display: flex;
justify-content: space-between;
align-items: center;
}

Answer 3

HTML:
<div class="header">
<div class="col-xs-12 col-md-4 header-element">
<img src="custom_images/logo3.png" />
</div>
<div class="col-xs-6 col-md-4 text-center header-element">
<div class="input-group">
<input type="text" class="form-control header_search" placeholder="Search Here....." aria-describedby="basic-addon1">
<span class="input-group-addon search_span" id="basic-addon1"><i class="fa fa-search "></i> </span>
</div>
</div>
<div class="col-xs-6 col-md-4 text-right">
<button class="cart_button"><span>Items in your cart</span> <span style="margin-left:25px;"><img src="custom_images/cart_item.png" /></span></button>
<span class="cart_items">15</span>
</div>
</div>
CSS:
.header-element{
position: relative;
top: 50%;
transform: translateY(-50%);
}