Behaviour of element with and without child

Question

I am learning CSS, and trying to write some code; I have three div elements with inline-block and specified dimensions. The three of them appear right next to each other as expected, but as I insert a child element in the third div it suddenly shifts down about 190 pixels why is it so?

Before the child element "your text":

With the child element:

body {
  margin: 0;
}

h1 {
  margin: 0;
}

.size {
  width: 200px;
  height: 200px;
}

.col1 {
  display: inline-block;
  background-color: powderblue;
}

.col2 {
  display: inline-block;
  background-color: red;
}

.col3 {
  display: inline-block;
  background-color: blue;
}

<div class="size col2">

</div>
<div class="size col3">

</div>

<div class="size col1">
  <span>Hello</span>
</div>