Why is the content inside a parent container affecting the parent's position?

Question

When you go full screen and have a width of the screen larger than 1340px, you will see my current issue. The div with the input is being moved down. Why is this? I am trying to get it to stay in position with the other two divs.

body {
  background: #212121;
}

.wrapper {
  padding: 20px;
  max-width: 1270px;
  margin: 150px auto;
}

@media (max-width: 1340px) {
  .wrapper {
    max-width: 400px;
  }
}

.content {
  height: 100%;
  width: 400px;
  margin: 10px;
  min-width: 300px;
  min-height: 500px;
  display: inline-block;
  background: #424242;
  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
  -moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
}

.insert {
  display: flex;
}

<div class="wrapper">
  <div class="content" id="row1">
    <div class="wordInputContainer">
      <div class="inputBox">
        <input class="insert" type="text" placeholder="Enter Words"></input>
      </div>
    </div>
  </div>
  <div class="content" id="row2">
    <div class="wordOutputContainer">
      <div class="listBox">
        <!-- List Elements Go Here -->
        <!-- Words Output In Alphabetical Order [A - Z] -->
      </div>
    </div>
  </div>
  <div class="content" id="row3">
    <div class="wordStatisticContainer">
      <div class="wordCount"></div>
      <div class="commonLetter"></div>
      <div class="commonWord"></div>
      <div class="longestWord"></div>
      <div class="shortestWord"></div>
    </div>
  </div>
</div>

Answer 1

Because your divs are display: inline-block, they will use baseline alignment for their inline-level elements, such as text, images and inputs. The default setting is vertical-align: baseline.

So your input element is aligning to the baseline of the other divs.

Just add vertical-align: top to .content.

More here: Why is there a vertical scroll bar if parent and child have the same height?