How to vertically align divs with different contents? - html

Question

I have two section on a page. I am not able to vertically align their contents. I am using vertical-align:middle yet unable to do it. I have also tried display:flex but that creates problem in responsive view.
Here is the structure:
<div class="container-fluid" style="display:table;width:100%;">
<div class="row" style="display: table-cell;vertical-align:middle;">
<div class="col-lg-9 section_1">
<div class="logo hidden-xs">
<img src="custom_images/logo.png" />
</div>
<div class="realtor">
<img src="custom_images/realtors-profileimg.png" width="70" height="70" />
</div>
<div class="name & number">
<span>Sohil shah</span>
<span>[phone]</span>
</div>
<div class="moving_companies hidden-xs">Find Moving Companies in Chicago, IL 1-8444-4Move-EZ</div>
<div class="phone_number hidden-xs">080-888-0888</div>
<<div class="powered_by hidden-xs">
<img src="custom_images/powerdby-logo.png" />
</div>
</div>
<div class="col-lg-3 section_2" style="height:70px;">
<!--<button class="login">Login<i class="fa fa-caret"></i></button>-->
<div class="logo">
<img src="custom_images/logo.png" />
</div>
<div class="name & number">
<span>Sohil shah</span>
<span>[phone]</span>
</div>
</div>
</div>
</div>
and the style is here....
.row > div
{
display: table-cell;
vertical-align: middle;
}
.section_1 > div
{
display: inline-block;
}
.section_2 > div
{
display: inline-block;
}
img
{
max-width: 100%;
max-height: 100%;
}
and here is the screen shot of the problem...

Answer 1

You had error in HTML <<div class="powered_by hidden-xs">
Here is fixed version https://jsfiddle.net/kjp91hko/2/
<div class="container-fluid" style="display:table;width:100%;">
<div class="row" style="display: table-cell;vertical-align:middle;">
<div class="col-lg-9 section_1">
<div class="logo hidden-xs">
<img src="custom_images/logo.png" />
</div>
<div class="realtor">
<img src="custom_images/realtors-profileimg.png" width="70" height="70" />
</div>
<div class="name & number">
<span>Sohil shah</span>
<span>[phone]</span>
</div>
<div class="moving_companies hidden-xs">Find Moving Companies in Chicago, IL 1-8444-4Move-EZ</div>
<div class="phone_number hidden-xs">080-888-0888</div>
<div class="powered_by hidden-xs">
<img src="custom_images/powerdby-logo.png" />
</div>
</div>
<div class="col-lg-3 section_2" style="height:70px;">
<!--<button class="login">Login<i class="fa fa-caret"></i></button>-->
<div class="logo">
<img src="custom_images/logo.png" />
</div>
<div class="name & number">
<span>Sohil shah</span>
<span>[phone]</span>
</div>
</div>
</div>
</div>