display: inline-block not working correctly

Question

I have two divs which I would like to have placed next to each other. This works when I give both divs the display: inline-block; property, but once I add a <p> tag into one of the divs the placement of that div goes out of whack. This is what i'm working with:

HTML:

<div class = "icon_container">
    <button><img src="images/favorite.png" class = "profile_icons"/></button><p>1234</p>
</div>
<div class = "icon_container">
    <button><img src="images/tool.png" class = "profile_icons"/></button>
</div>

CSS:

.icon_container {
    height: 150px;
    display: inline-block;
}

Fiddle:

https://jsfiddle.net/qLysghjf/

Answer 1

Try adding a vertical align to your icon_container class:

.icon_container {
    height: 100px;
    display: inline-block;
    background-color: red;
    vertical-align: top;
}

https://jsfiddle.net/qLysghjf/2/

Answer 2

Well, according to this post by @robertnyman, to make inline-block element vertically align right, it needs vertical-align: top; . I had tried in your fiddle get the result as: https://jsfiddle.net/qLysghjf/3/

So the css is:

.icon_container {
  height: 100px;
  display: inline-block;
  background-color: red;
  vertical-align: top;
}

Answer 3

Please add float:left in .icon_container css class. Hope this will work