inline-block moving down on page

Question

I am participating in a CSS class on Udemy. Unfortunately I got no answers on thier internal discord site, so I am trying here.

This is a question about the display of some elements. What I don't understand is that first div element is moving down on the page, because I wrote the text "Hey you" in it. It shouldn't move down in my opinion, it should stay on the top of the page inline with the other two elements.

Here is the html and CSS:

div {
  height: 200px;
  width: 200px;
  background-color: olivedrab;
  border: 5px solid black;
  display: inline-block;
  margin: 50px;
}

<div>Hey you</div>
<div></div>
<div></div>

First div moving down

I have tried to give the first div an id:

<div id="first_div">Hey you</div>

And give that id a position of absolute:

#first_div {
    position: absolute;
}

But it doesn't really work since the absolute value of the position property removes the element from the document flow, and thereby places it on top of the second element, so only two out of the three divs is showing, so no fix really! Divs are now incorrectly stacked