resize div with jquery and move up

I want to make dynamic blocks which content may be different, so that height of each div can be different.

I have made a simple jquery height change so each div is getting height of the div which is the tallest.

However when I am doing so the height is added to the bottom, so even when divs are the same height they are not displayed in one line.

Here is an example: https://jsfiddle.net/p30rduon/

$(document).ready(function() {
  var maxHeight = Math.max.apply(null, $("div.pb").map(function() {
    return $(this).height();
  }).get());

  $('div.pb').css('height', maxHeight);
  $('div.pb').css('margin-top', 0);
});

div.pb {
  margin: 0 auto;
  width: 200px;
  height: auto;
  display: inline-block;
  margin-right: 15px;
  margin-bottom: 20px;
  background-color: rgba(54, 25, 25, .1);
  box-shadow: 10px 10px 5px #888888;
}
.img-circle {
  border-radius: 50%;
  width: 120px;
  height: 120px;
  background-color: rgba(255, 255, 255, .5);
  display: block;
  margin-left: auto;
  margin-right: auto;
}
p {
  margin: 0;
  text-align: center;
}
p.firstline {
  font-size: 100%;
  font-weight: bold;
  word-wrap: break-word;
}
p.second {
  font-size: 100%;
  font-weight: bold;
}
p.third {
  font-size: 80%;
}
p.fourth {
  font-size: 70%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pb">
  <img src="http://cdn.arstechnica.net/wp-content/uploads/2016/02/5718897981_10faa45ac3_b-640x624.jpg" class="img-circle" />
  <p class="firstline">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
  <p class="second">donejob</p>
  <p class="third">2016-12-12</p>
  <p class="fourth">Job Type</p>
</div>
<div class="pb">
  <img src="http://cdn.arstechnica.net/wp-content/uploads/2016/02/5718897981_10faa45ac3_b-640x624.jpg" class="img-circle" />
  <p class="firstline">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
  <p class="second">donejob</p>
  <p class="third">2016-12-12</p>
  <p class="fourth">Job Type</p>
</div>
<div class="pb">
  <img src="http://cdn.arstechnica.net/wp-content/uploads/2016/02/5718897981_10faa45ac3_b-640x624.jpg" class="img-circle" />
  <p class="firstline">Lorem ipsum Lorem ipsum</p>
  <p class="second">donejob</p>
  <p class="third">2016-12-12</p>
  <p class="fourth">Job Type</p>
</div>

Can any one give me a hint what am I missing?

Solution

use vertical-align: top; to show div in one line.

$(document).ready(function(){
var maxHeight = Math.max.apply(null, $("div.pb").map(function ()
{
	return $(this).height();
}).get());

$('div.pb').css('height', maxHeight);
$('div.pb').css('margin-top', 0);
});

div.pb {
margin:0 auto;
width: 150px;
height: auto;
display: inline-block;
margin-right: 15px;
margin-bottom: 20px;
background-color: rgba(54, 25, 25, .1);
box-shadow: 10px 10px 5px #888888;
vertical-align: top;
}
.img-circle {
border-radius: 50%;
width: 120px;
height: 120px;
background-color: rgba(255, 255, 255, .5);
display: block;
margin-left: auto;
margin-right: auto;
}
p { 
margin: 0; 
text-align: center;
}
p.firstline {
 font-size: 100%;
 font-weight: bold;
 word-wrap:break-word;
}
p.second {
 font-size: 100%;
 font-weight: bold;
}
p.third {
 font-size: 80%;
}
p.fourth {
 font-size: 70%;
}

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>

<div class="pb">
<img src="http://cdn.arstechnica.net/wp-content/uploads/2016/02/5718897981_10faa45ac3_b-640x624.jpg" class="img-circle"/>
<p class="firstline">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </p>
<p class="second">donejob</p>
<p class="third">2016-12-12</p>
<p class="fourth">Job Type</p>
</div>
<div class="pb">
<img src="http://cdn.arstechnica.net/wp-content/uploads/2016/02/5718897981_10faa45ac3_b-640x624.jpg" class="img-circle"/>
<p class="firstline">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </p>
<p class="second">donejob</p>
<p class="third">2016-12-12</p>
<p class="fourth">Job Type</p>
</div>
<div class="pb">
<img src="http://cdn.arstechnica.net/wp-content/uploads/2016/02/5718897981_10faa45ac3_b-640x624.jpg" class="img-circle"/>
<p class="firstline">Lorem ipsum Lorem ipsum </p>
<p class="second">donejob</p>
<p class="third">2016-12-12</p>
<p class="fourth">Job Type</p>
</div>