Как с помощью flex сделать два равных div по высоте?

Question

[Анастасия]

<div class="wrapper">
     <div class="col">
          <div class="discover">
               <div class="heading">
                    <h1>Текс</h1>
               </div>
               <div class="desc">
                    <p>Еще немного текста</p>
               </div>
               <div class="buttons">
                    <button>Привет</button>
          </div>
          </div>
     </div>
     <div class="col">
          <div class="video">
               <img src="img/img.svg">
          </div>
     </div>
 </div>

.wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.col {
    flex: 0 0 50%;
    max-width: 50%;
}

Нужно чтобы div с классом video всегда был равным по высоте div-у с классом discover, и при адаптации тоже сохраняли свою высоту. Как это сделать с помощью flex?

Answer 1

[Dima Polos]

Удалить align-items: center для начала

Answer 2

[profesor08]

align-items: stretch
https://developer.mozilla.org/ru/docs/Web/CSS/alig...