Random movement of adjacent parent containers when my text gets to long: HTML/CSS

Question

I'm pretty new to coding/web design so maybe this has an obvious answer. But I'm just practicing with things. I have, on a very basic web page, a list of three colors. And I've put above them the name of the color. I created the color blocks by putting them in an unordered list and then setting them to display: inline-block so they would be side by side. The text is a child [p] element of the containing block that I centered and then set to position: relative. I then moved them upward so that they would be above the color blocks. Here is the HTML I used

.backgroundclr {
  list-style: none;
  margin-top: 70px;
}

.backgroundclr li {
  border: 1px solid black;
  display: inline-block;
  padding: 50px;
  height: 100px;
  width: 200px;
  text-align: center;
}

.bclr1 {
  background-color: rgb(48, 56, 65);
}

.bclr2 {
  background-color: rgb(114, 120, 126);
}

.backgroundclr li p {
  position: relative;
  bottom: 95px;
  font-size: 20px;
}

<ul class="backgroundclr">
  <li class="bclr1">
    <p>Dark Gray</p>
  </li>
  <li class="bclr2">
    <p>Medium Gray</p>
  </li>
  <li class="bclr3">
    <p>White</p>
  </li>
</ul>

This works fine when the text is just one line. But when I go to put the rgb value of the color in the text the text in each element gets long enough that it creates a second line of text. And for some reason when this happens it pushes the next li elements down. Here is a picture of both states.

One line of text

Two lines of text

This might be something obvious I'm not realizing. IDK if the way I went about making the color blocks or getting the text centered and above them was the most practical/useful/flexible way to do this either. I was just curious if anyone here had any idea why this happens. Thanks!

Answer 1

The blocks have vertical-align:baseline by default, which causes them to align to the bottoms of the texts. And that only works correctly when the texts have the same number of lines.
Solution: add vertical-align:top to align them to the top.

.backgroundclr {
  list-style: none;
  margin-top: 70px;
}

.backgroundclr li {
  border: 1px solid black;
  display: inline-block;
  vertical-align: top;         /* new */
  padding: 50px;
  height: 100px;
  width: 200px;
  text-align: center;
}

.bclr1 {
  background-color: rgb(48, 56, 65);
}

.bclr2 {
  background-color: rgb(114, 120, 126);
}

.backgroundclr li p {
  position: relative;
  bottom: 95px;
  font-size: 20px;
}

<ul class="backgroundclr">
  <li class="bclr1">
    <p>Dark Gray</p>
  </li>
  <li class="bclr2">
    <p>Medium Gray</p>
  </li>
  <li class="bclr3">
    <p>White</p>
  </li>
</ul>