Make children divs equal in height of tallest child

Asked Aug 22 '17 at 11:09

Active Aug 22 '17 at 11:09

Viewed 109 times

I have two child elements inside of a parent container as shown:

<div class="row">
<div class="item">
    <p>Sup?</p>
    <p>Sup?</p>
    <p class="equal-height">Sup?</p>
    <p>Sup?</p>
</div>

<div class="item">
    <p>Sup?</p>
    <p class="equal-height">Sup?</p>
    <p>Sup?</p>
    <p>Sup?</p>
</div>
<div class="item">
    <p>Sup?</p>
    <p class="equal-height">Sup?</p>
    <p>Sup?</p>
    <p>Sup?</p>
</div>
<div class="item">
    <p>Sup?</p>
    <p>Sup?</p>
    <p>Sup?</p>
    <p class="equal-height">Wish that other guys was the same height as me</p>
</div>

I want that the text/image content in the class "equal-height" should have the same height of the largest text in either of the columns in the class "equal-height". I'm unable to figure out.

asked Aug 22 '17 at 11:09

Mark Anderson

Are you using some CSS Framework? – Mohammad Usman Aug 22 '17 at 11:10
You can use the `align-items: stretch` property of css `flexbox` – Abin Thaha Aug 22 '17 at 11:13
It's not possible with pure css. You can set `.equal-height{ height: 100px}` for example, but sa I understand you need to have it dunamic. So it's possible only with js – Taras Kumpanenko Aug 22 '17 at 11:14
please search before you post, – Hash Aug 22 '17 at 11:14

Make children divs equal in height of tallest child

0 Answers0