Stop div from shifting down when text is added

I found the solution. By adding vertical-align: top; it moved the div back. don't know why it worked, but it did.

Going to add on to zachstarnes's answer.

The problem is that the vertical-align by default is set to baseline.

Align the baseline of the element with the baseline of the parent element. This is default

Since the other divs are empty, their baseline default to the bottom of the div. Notice if as you fill in text they will all start to shift down until they all have content in them.

Depending on how you want the divs to line up with each other change the vertical-align property to something other baseline.

---