Why is a block with text moving down?

Question

Why is the block with the text shifted to the bottom? I know how to fix this problem (I need to add "overflow: hidden" in the field), but I don’t understand why it moves at the bottom, the text inside the field is short, the fields in the inspector browser match the fields of the example without text.

Problem example

HTML:

<div class="with-text">
  <div class="box1">
    SIMPLE TEXT
  </div>
  <div class="box2">
  </div>
</div>
<div class="without-text">
  <div class="box1">
  </div>
  <div class="box2">
  </div>
</div>

CSS

html, body {
  font-size: 10px;
  margin: 0;
  height: 100%;
}

.box1 {
  display: inline-block;
  margin: 5px;
  width: 50px;
  height: 50px;
  background: blue;
  /* Fix the problem */
  /* overflow: hidden; */
  color: white;
}

.box2 {
  display: inline-block;
  margin: 5px;
  width: 50px;
  height: 50px;
  background: red;
}

.with-text:before {
  display: block;
  content: "with-text";
  text-transform: uppercase;
  margin: 1rem;
}

.with-text {
  box-sizing: border-box;
  height: 50%;
  border: 1px solid;
}

.without-text:before {
  display: block;
  content: "without text";
  text-transform: uppercase;
  margin: 1rem;
}

.without-text { 
  box-sizing: border-box;
  height: 50%;
  border: 2px solid black;
}

Answer 1

The problem is that by default, the vertical alignment of inline elements is at the base level ,

The text inside the element affects it and pushes the div to the bottom.

Use vertical-align: topto solve the problem.

Answer 2

:

.box1 {
  display: inline-block;
  margin: 5px;
  width: 50px;
  height: 50px;
  background: blue;
  /* overflow: hidden; */
  color: white;
  vertical-align:top;
}