Есть несколько способов добиться этого.
Статический
Самый простой, но самый хрупкий способ - это обернуть верхнюю часть в <div> определить высотусамого высокого окна, и установите это как min-height в CSS.Но это приводит к проблемам с удобством сопровождения, если текст слишком длинный или поля настраивают ширину на разных размерах экрана.
HTML
<li class="item item1">
<div class="item-intro">
<img src="images/chromebookpro.jpg">
<h2>Google Pixelbook</h2>
<p class="pricing">Starting at $999</p>
<p>The first high performance Chromebook with Google Assistent built in. Features a four-in-one design offering laptop, tablet, tent, and entertainment modes, an all day battery with fast charging, a sleek aluminum body, and an optional pen. </p>
</div>
<div class="item-text-specs">
<p class="item-specs"> Key Specs</p>
<div class="item-list">
<p class="article">12.3" Quad HD LCD</p>
<p class="article">Intel processor®</p>
</div>
<div class="item-list">
<p class="article">128/256/512 GB</p>
<p class="article">8/16 GB memory</p>
</div>
</div>
</li>
CSS
.item-intro {
min-height: 300px;
}
Динамический - Чистый CSS
Другой вариант - сделать два поля для описания верхнего и нижнего элементов.Затем, используя flexbox, вы можете сделать так, чтобы высоты автоматически соответствовали друг другу.Но это становится сложным для мобильной реакции и потребует использования order.Вы также можете использовать grid для достижения чего-то похожего.
HTML
<ul class="item-list">
<!-- Item 1 Start-->
<li class="item item1">
<img src="images/chromebookpro.jpg">
<div class="item-text">
<h2>Google Pixelbook</h2>
<p class="pricing">Starting at $999</p>
<p>The first high performance Chromebook with Google Assistent built in. Features a four-in-one design offering laptop, tablet, tent, and entertainment modes, an all day battery with fast charging, a sleek aluminum body, and an optional pen. </p>
</div>
</li>
<div class="item-text-specs item1">
<p class="item-specs"> Key Specs</p>
<div class="item-list">
<p class="article">12.3" Quad HD LCD</p>
<p class="article">Intel processor®</p>
</div>
<div class="item-list">
<p class="article">128/256/512 GB</p>
<p class="article">8/16 GB memory</p>
</div>
</div>
<!-- Item 1 End-->
<!-- Item 2 Start-->
<li class="item item2">
<img src="images/chromebookpro.jpg">
<div class="item-text">
<h2>Samsung Chromebook Pro</h2>
<p class="pricing">Starting at $549</p>
<p>The power of a Chromebook. The versatility of a tablet. A 360 degree rotating screen and an Intel® Core™ M3 processor helps get things done. Write and create naturally with a built-in pen.</p>
</div>
</li>
<div class="item-text-specs item2">
<p class="item-specs"> Key Specs</p>
<div class="item-list">
<p class="article">12.3" Quad HD LCD</p>
<p class="article">Intel processor®</p>
</div>
<div class="item-list">
<p class="article">32 GB eMMC</p>
<p class="article">1 x 4 GB memory</p>
</div>
</div>
<!-- Item 2 End-->
<!-- Item 3 Start-->
<li class="item item3">
<img src="images/chromebookpro.jpg">
<div class="item-text">
<h2>ASUS Chromebook Flip C302</h2>
<p class="pricing">Starting at $499</p>
<p>Flip between a high-performance Chromebook, a handy backlit tablet, and anything in between with a 360 degree hinge.</p>
</div>
</li>
<div class="item-text-specs item3">
<p class="item-specs"> Key Specs</p>
<div class="item-list">
<p class="article">12.5" (16:9) LED</p>
<p class="article">Intel processor®</p>
</div>
<div class="item-list">
<p class="article">0.53" thin</p>
<p class="article">4/8 GB memory</p>
</div>
</div>
<!-- Item 3 End-->
</ul>
CSS
.item,
.item-text-specs {
flex: 0 1 100%;
}
/* Only needed for desktop */
@media (max-width: 768px) {
.item-text-specs.item1 {
order: 4;
}
.item-text-specs.item2 {
order: 5;
}
.item-text-specs.item3 {
order: 6;
}
}
Динамический - JS
Последний вариант - написать фрагмент JavaScript, который проходит по верхним блокам, находит самый высокий блок и применяет эту высоту ко всем блокам.Вам придется изменить HTML-код, чтобы отделить верхнее описание в <div>, как показано в примере Static .Я не собираюсь писать Javascript, потому что это займет много времени, но это должно быть относительно просто.Наиболее сложной функцией будет запуск регулировки высоты при изменении размера окна, если также изменяется ширина блоков.Из-за этого может быть проще использовать jQuery в зависимости от вашего знакомства с Javascript.