Как сделать все флекс-элементы в строке одинаковой высоты? При этом, чтоб текст прижался кверху, а не по центру?

Question

Muriam @Muriam

CSS
Flexbox

Как сделать все флекс-элементы в строке одинаковой высоты? При этом, чтоб текст прижался кверху, а не по центру?

Как сделать элемент с текстом (в синей рамке), по высоте таким же как элемент с картинкой (в зеленой) ?

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>

  <div id="content">
    <div class="text">
     <pre>
      ДОМ
      • Дом с изысканным и уникальным
      дизайном располагается внутри парка.
      • Всё общественное пространство для
      Вашей безопасности находится под
      круглосуточным видеонаблюдением.
      • Закрытый двор без машин с уютной
      зоной отдыха.
     </pre>
    </div>
    
    <div id="slider">
    <div id="viewport">
      <div class="slider" style="left: 0">
          <div class="slide"><img src="static/p1.jpg"></div>
          <div class="slide"><img src="static/p2.jpg"></div>
          <div class="slide"><img src="static/p3.jpg"></div>
          <div class="slide"><img src="static/p4.jpg"></div>
          <div class="slide"><img src="static/p5.jpg"></div>
      </div>
    </div>

    <div id="viewSlider">
      <div class="viewSlide"></div>
      <div class="viewSlide"></div>
      <div class="viewSlide"></div>
      <div class="viewSlide"></div>
      <div class="viewSlide"></div>
    </div>

    <button class="prev" id="prev">Назад</button>
    <button class="next" id="next">Вперёд</button>    
    </div>
  </div>
    
  
  
  <script src="script.js"></script>
</body>

</html>

<code lang="css">
body {
  background-image: url(static/photo1.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
}

#content {
  background: rgba(242, 232, 201, 0.5);
  margin: 0 auto;
  width: 80%;
  height: 100%;
  font-family: Merienda;
  font-weight: 800;
  /* жирность текста */
  font-size: 25px;
  /*   размер шрифта */
  line-height: 25px;
  /*   межстрочный интервал */
  display: flex;
  /* flexbox */
  flex-direction: row;
  align-items: center;
  border: 2px solid purple;
}


#slider {
  flex: 1;
  border: 2px solid green;
}

.text {
  flex: 1;
  /* Растягиваем текст, чтобы занять все оставшееся пространство */
  border: 2px solid blue;
}

#viewport {
  overflow: hidden; /*чтоб картинки, листаясь, не показывали за пределами зеленой рамки*/
}


.slider {
  position: relative;
  transition: 500ms;
  width: calc(100% * 5);
  display: flex;
  justify-content: start;
  flex-wrap: nowrap;
}


.slide img {
  object-fit: cover;
  object-position: 0;
  width: 100%;     /* чтоб картинка не вылазила за пределы дива !!! */
}

#viewSlider {
  width: calc(30px * 5);
  display: flex;
  justify-content: space-between;
}

.viewSlide {
  background-color: thistle;
}

</code>