<h1>Top</h1>
<div class="one">
  <div class="top">
    <img src="https://cdn.pixabay.com/photo/2020/08/14/11/23/mountain-5487678_960_720.jpg">
    <img src="https://cdn.pixabay.com/photo/2019/09/05/18/20/pumpkin-4454745_960_720.jpg">
  </div>
</div>

<h1>Middle</h1>
<div class="two">
  <div class="middle">
    <img src="https://cdn.pixabay.com/photo/2020/08/14/11/23/mountain-5487678_960_720.jpg">
    <img src="https://cdn.pixabay.com/photo/2019/09/05/18/20/pumpkin-4454745_960_720.jpg">
  </div>
</div>

<h1>Bottom</h1>
<div class="three">
  <div class="bottom">
    <img src="https://cdn.pixabay.com/photo/2020/08/14/11/23/mountain-5487678_960_720.jpg">
    <img src="https://cdn.pixabay.com/photo/2019/09/05/18/20/pumpkin-4454745_960_720.jpg">
  </div>
</div>

body {
  background: gray;
}

img {
  width: 500px;
}

.one, .two, .three {
  background-color: white;
  padding: 10px;
  display: inline-block;
  width: 80%;
}

/* The > * is a fancy way for developers to target direct children of certain elements. In this case, the middle, top, and bottom classes are targeting the direct children of *. * is a way developers can target all elements. */


.top > * {
  vertical-align: top;
}

.middle > * {
  vertical-align: middle;
}

.bottom > * {
  vertical-align: bottom;
}