display:inline-block not aligned

Question

I'm trying to display to some boxes next to each other side-by-side using display:inline-block.

Unfortunately, the alignment is messed up. Why is this so?

CODE:

.leftBox {
  width: 100px;
  height: 100px;
  background-color: green;
  display: inline-block;
}
.rightBox {
  display: inline-block;
}
.topBox {
  width: 100px;
  height: 50px;
  background-color: yellow;
}
.bottomBox {
  width: 100px;
  height: 50px;
  background-color: orange;
}

<div>
  <div class='leftBox'>d1</div>
  <div class='rightBox'>
    <div class='topBox'>d2</div>
    <div class='bottomBox'>d3</div>
  </div>
</div>

Here's the plunker

Answer 1

inline-block is vertical-align:baseline by default, so set it vertical-align:top

I improved your CSS, take a look:

.box {
  font-size: 0
  /*fix inline-block gap */
}
.leftBox,
.rightBox {
  display: inline-block;
  vertical-align: top;
  width: 100px;
  height: 100px;
  font-size: 16px;
  /* reset font */
}
.rightBox > div {
  height: 50px
}
.leftBox {
  background-color: green;
}
.topBox {
  background-color: yellow;
}
.bottomBox {
  background-color: orange;
}

<div class='box'>
  <div class='leftBox'>d1</div>
  <div class='rightBox'>
    <div class='topBox'>d2</div>
    <div class='bottomBox'>d3</div>
  </div>
</div>

Answer 2

Or add this to your parent div

.parent{
  display: flex;
}