CSS behaving strangely

Question

The moment I place div2 within div1, div1 just drops by some random degree. Not sure what's going on here since I just placed div3 within div1 and it's working just fine.

.propertyOverview {
    height: 430px;
    width: 357px;
    margin-right: 10px;
    margin-top: 15px;
    background-color: white;
    display: inline-block;
    border: solid 1px #E8E8E8;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

.propertyImage {
    height: 260px;
    width: 355px;
    background-color: #a29c9c;
    border-radius: 5px 5px 0 0;
    margin-left: -15px;    
}

<div class="col-sm-10 col-sm-offset-1">
    <div class="container propertyOverview">
    <div class="propertyImage"></div>
    <div>
        Sample text
    </div>
</div>

Screen shot of what I'm looking at

Answer 1

This might help you:

.propertyOverview{
    height: 430px;
   width: 357px;
   margin-right: 10px;
   margin-top: 15px;
   background-color: white;
   display: inline-block;
   vertical-align:top;
   border: solid 1px #E8E8E8;
   border-radius: 5px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
}
.propertyImage {
   height: 260px;
   width: 357px;
   background-color: #a29c9c;
   border-radius: 5px 5px 0 0;
   margin-left:0;    
   }

https://jsfiddle.net/jungrupak/ptqbbugw/

Answer 2

Apply vertical-align:top for inline-block element, because the default alignment is baseline. It will resolve the issue.

.propertyOverview {
   height: 430px;
   width: 357px;
   margin-right: 10px;
   margin-top: 15px;
   background-color: white;
   display: inline-block;
   vertical-align:top; /* Added this one for alignment */
   border: solid 1px #E8E8E8;
   border-radius: 5px;
   -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
  }