Question: I wanted to display two `<div>` elements that have width and height side-by-side. I applied `inline-block` to the `<div>`s, but the position of the left element is strange:

![vertical misalignment](https://i.stack.imgur.com/mqBkQ.png)

HTML:

```
<body>
    <div id="myDivTag">content</div>
    <div id="map-canvas">for google map API</div>
</body>

```

CSS:

```
#myDivTag, #map-canvas {
    display: inline-block;
    height: 95%;
    width: 49%;
    z-index: 0;
}

```

The only difference between the two elements is the `overflow: hidden` option. When I apply `overflow: hidden` to `#myDivTag`, it works normally, but I don't know why. I think it has nothing to do with the `overflow` property. But my thought is clearly wrong. Why?

Answer: 
By default inline boxes in a line are vertically aligned by their baselines (since the default value of the `vertical-align` property is `baseline`) and the baseline of inline-blocks depends on the value of the `overflow` property. If the value of the `overflow` property on an inline-block is `visible`, then the baseline of this inline-block is the baseline of its last line, but if the overflow property has another value (for example `hidden`), then its baseline is the bottom margin edge.

[The documentation says](https://drafts.csswg.org/css2/visudet.html#propdef-vertical-align)

> 
> The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.
> 
> 
> 

I also suggest you reading [this great article](http://christopheraue.net/2014/03/05/vertical-align/) in order to understand completely the vertical alignment of inline stuff.
Add vertical-align to your css and it should work:

```
#myDivTag, #map-canvas {
    display: inline-block;
    vertical-align:top;
    height: 95%;
    width: 49%;
    z-index: 0;
} 

```