Unable to put two divs on same line using inline-block

Question

I am trying to place two divs on same line.

<div id="page">
    <div id="first-box">   
    </div>
    <div id="second-box">
        this is second box
    </div>  
 </div>

css

div#page {
   background-color: slategrey;
   width: 960px;
   height:900px;
   margin: 20px;
   padding:20px;
   border:4px solid blue;
}
div#first-box{
   width:200px;
   height:200px;
   display:inline-block;
   border:1px groove black;
}
div#second-box{
   display:inline-block;
   width:200px;
   height:200px;
   padding:10px;
   border:1px solid green;
}

it place itself in same line when I use vertical-align:top in the second-box. But why it behave like that? Thanks http://codepen.io/rajinirajadev/pen/xgBVab

Answer 1

add this line in your second-box's css:

div#second-box{
  display:inline-block;
  width:200px;
  height:200px;
  padding:10px;
  border:1px solid green;
  vertical-align: top; // add this line
}