CSS responsiveness, inline-divs with unequal heights

Question

If we style multiple divs with property display set to "inline-block" and one of them has a height longer than the others, all the smaller divs align at the bottom creating extra space at the top. But all I wanted is that the smaller divs align at the top and leave any extra space at the bottom. Is there any way I can achieve the required effect?

Answer 1

vertical-align: top for inline-block divs does that. vertical-align

.b{
  display: block;
  background-color: red;
}

.ib {
  display: inline-block;
  background-color: blue;
  width: 50px;
  vertical-align: top; /*this line*/
}

.d1 {
  height: 100px;
}

.d2, .d3 {
  height: 50px;
}

<div class="b">
  <div class="ib d1"></div>
  <div class="ib d2"></div>
  <div class="ib d3"></div>
</div>