Maintain the same height of nested div inside 3 column

Question

I have 3 columns these columns have same section e.g title, address and etc. not only i want the card to have the same height but also the nested section should have the same height e.g if in one section title having 3 line, in second and third section title should maintain the same height even if it is short. I have tried doing this but failed so far.

<div class="container">

  <div class="card">
    <div class="row" style="background-color: yellowgreen;">Hey this is tariq</div>
    <div class="row">Hey this is tariq 
      Hey this is tariq
      Hey this is tariq
      Hey this is tariq

    </div>
    <div class="row">Hey this is tariq asdfa sdfasd asdnasdfnasdfas 
      asdf asdnasdfnasdfas fasd
      fa
      sdfa sdfasd 
      asdfaasd 
      asdfsa
    </div>
        <div class="row">Hey this is tariq asdfa sdfasd asdnasdfnasdfas 
      asdf asdnasdfnasdfas fasd
      fa
      sdfa sdfasd Hey this is tariq asdfa sdfasd asdnasdfnasdfas 
      asdf asdnasdfnasdfas fasd
      fa
      sdfa sdfasd 
      asdfaasd 
      asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas 
      asdf asdnasdfnasdfas fasd
      fa
      sdfa sdfasd 
      asdfaasd 
      asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas 
      asdf asdnasdfnasdfas fasd
      fa
      sdfa sdfasd 
      asdfaasd 
      asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas 
      asdf asdnasdfnasdfas fasd
      fa
      sdfa sdfasd 
      asdfaasd 
      asdfsa
      asdfaasd 
      asdfsa
    </div>

  </div>
  <div class="card">  <div class="row" style="background-color: yellowgreen;">Hey this is tariq</div>
    <div class="row">Hey this is tariq 
      Hey this is tariq
      Hey this is tariq
      Hey this is tariq

    </div>
    <div class="row">Hey this is tariq asdfa sdfasd asdnasdfnasdfas 
      asdf asdnasdfnasdfas fasd
      fa
      sdfa sdfasd 
      asdfaasd 
      asdfsa
    </div>
        <div class="row">Hey this is tariq asdfa sdfasd asdnasdfnasdfas 
      asdf asdnasdfnasdfas fasd
      fa
      sdfa sdfasd Hey this is tariq asdfa sdfasd asdnasdfnasdfas 
      asdf asdnasdfnasdfas fasd
      fa
      sdfa sdfasd 
      asdfaasd 
      asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas 
      asdf asdnasdfnasdfas fasd
      fa
      sdfa sdfasd 
      asdfaasd 
      asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas 
      asdf asdnasdfnasdfas fasd
      fa
      sdfa sdfasd 
      asdfaasd 
      asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas 
      asdf asdnasdfnasdfas fasd
      fa
      sdfa sdfasd 
      asdfaasd 
      asdfsa
      asdfaasd 
      asdfsa
    </div></div>
  <div class="card">  
    <div class="row" style="background-color: yellowgreen;">Hey this is tariq 
      Hey this is tariq
      Hey this is tariq
      Hey this is tariq

    </div><div class="row">Hey this is tariq asdfa sdfasd asdnasdfnasdfas 
      asdf asdnasdfnasdfas fasd
      fa
      sdfa sdfasd Hey this is tariq asdfa sdfasd asdnasdfnasdfas 
      asdf asdnasdfnasdfas fasd
      fa
      sdfa sdfasd 
      asdfaasd 
      asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas 
      asdf asdnasdfnasdfas fasd
      fa
      sdfa sdfasd 
      asdfaasd 
      asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas 
      asdf asdnasdfnasdfas fasd
      fa
      sdfa sdfasd 
      asdfaasd 
      asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas 
      asdf asdnasdfnasdfas fasd
      fa
      sdfa sdfasd 
      asdfaasd 
      asdfsa
      asdfaasd 
      asdfsa
    </div>
    <div class="row">Hey this is tariq asdfa sdfasd asdnasdfnasdfas 
      asdf asdnasdfnasdfas fasd
      fa
      sdfa sdfasd 
      asdfaasd 
      asdfsa
    </div><div class="row">Hey this is tariq</div>
        
  </div>


</div>

<style>
  .container {
    display: flex;
    gap: 14px;
    justify-content: center;
}
.card {
    width: 22%;
    height: 600px;
    background: radial-gradient(black, transparent);
    align-self: stretch;
}
.row{
  border-bottom: 1px solid;
}
</style>

Same height of green section in all 3 column

score 0 · Answer 1 · edited Apr 04 '23 at 09:48

    <div class="container">
      <div class="heder">
        <div class="row title" style="background-color: yellowgreen;">Hey this is tariq</div>
        <div class="row title" style="background-color: yellowgreen;">Hey this is tariq</div>
        <div class="row title" style="background-color: yellowgreen;">Hey this is tariq
          Hey this is tariq
          Hey this is tariq
          Hey this is tariq
    
        </div>
      </div>
      <div class="content">
        <div class="card">
    
          <div class="row">Hey this is tariq
            Hey this is tariq
            Hey this is tariq
            Hey this is tariq
    
          </div>
          <div class="row">Hey this is tariq asdfa sdfasd asdnasdfnasdfas
            asdf asdnasdfnasdfas fasd
            fa
            sdfa sdfasd
            asdfaasd
            asdfsa
          </div>
          <div class="row">Hey this is tariq asdfa sdfasd asdnasdfnasdfas
            asdf asdnasdfnasdfas fasd
            fa
            sdfa sdfasd Hey this is tariq asdfa sdfasd asdnasdfnasdfas
            asdf asdnasdfnasdfas fasd
            fa
            sdfa sdfasd
            asdfaasd
            asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas
            asdf asdnasdfnasdfas fasd
            fa
            sdfa sdfasd
            asdfaasd
            asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas
            asdf asdnasdfnasdfas fasd
            fa
            sdfa sdfasd
            asdfaasd
            asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas
            asdf asdnasdfnasdfas fasd
            fa
            sdfa sdfasd
            asdfaasd
            asdfsa
            asdfaasd
            asdfsa
          </div>
    
        </div>
        <div class="card">
    
          <div class="row">Hey this is tariq
            Hey this is tariq
            Hey this is tariq
            Hey this is tariq
    
          </div>
          <div class="row">Hey this is tariq asdfa sdfasd asdnasdfnasdfas
            asdf asdnasdfnasdfas fasd
            fa
            sdfa sdfasd
            asdfaasd
            asdfsa
          </div>
          <div class="row">Hey this is tariq asdfa sdfasd asdnasdfnasdfas
            asdf asdnasdfnasdfas fasd
            fa
            sdfa sdfasd Hey this is tariq asdfa sdfasd asdnasdfnasdfas
            asdf asdnasdfnasdfas fasd
            fa
            sdfa sdfasd
            asdfaasd
            asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas
            asdf asdnasdfnasdfas fasd
            fa
            sdfa sdfasd
            asdfaasd
            asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas
            asdf asdnasdfnasdfas fasd
            fa
            sdfa sdfasd
            asdfaasd
            asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas
            asdf asdnasdfnasdfas fasd
            fa
            sdfa sdfasd
            asdfaasd
            asdfsa
            asdfaasd
            asdfsa
          </div>
        </div>
    
        <div class="card">
    
          <div class="row">Hey this is tariq asdfa sdfasd asdnasdfnasdfas
            asdf asdnasdfnasdfas fasd
            fa
            sdfa sdfasd Hey this is tariq asdfa sdfasd asdnasdfnasdfas
            asdf asdnasdfnasdfas fasd
            fa
            sdfa sdfasd
            asdfaasd
            asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas
            asdf asdnasdfnasdfas fasd
            fa
            sdfa sdfasd
            asdfaasd
            asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas
            asdf asdnasdfnasdfas fasd
            fa
            sdfa sdfasd
            asdfaasd
            asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas
            asdf asdnasdfnasdfas fasd
            fa
            sdfa sdfasd
            asdfaasd
            asdfsa
            asdfaasd
            asdfsa
          </div>
          <div class="row">Hey this is tariq asdfa sdfasd asdnasdfnasdfas
            asdf asdnasdfnasdfas fasd
            fa
            sdfa sdfasd
            asdfaasd
            asdfsa
          </div>
          <div class="row">Hey this is tariq</div>
    
        </div>
      </div>
    
    
    </div>
    
    <style>
      .container {
        display: flex;
        flex-direction: column;
        /* gap: 14px; */
        /* justify-content: center; */
      }
    
      .heder {
        display: flex;
        justify-content: center;
      }
    
      .heder .title {
        width: 22%;
        height: auto;
        margin: 0 10px;
      }
    
      .content {
        display: flex;
        justify-content: center;
      }
    
      .content .card {
        margin: 0 10px;
      }
    
      .card {
        width: 22%;
        height: 600px;
        background: radial-gradient(black, transparent);
        align-self: stretch;
      }
    
      .row {
        border-bottom: 1px solid;
      }
    
      .title {
        height: fit-content;
      }
    
    </style>

You can give it a try after modifying the layout structure – Jeffrey Apr 04 '23 at 09:37 — Jeffrey, Apr 04 '23 at 09:37

score 0 · Answer 2 · answered Apr 04 '23 at 09:51

0

.row { border-bottom: 1px solid;min-height:200px } Try this

answered Apr 04 '23 at 09:51

Shoaib Dev

71
6

content can be more than 200px as well. – Tariq Apr 05 '23 at 01:33

Nadir Alishly · Answer 3 · 2023-04-04T12:37:04.103

Solution with JavaScript

This script gets all the height values of rows and stores highest value in array for every row type. And then sets all rows to that highest hight value.

const container = document.getElementsByClassName("container")[0];
const cards = container.children;

let requiredHeights = [];

const getRequiredHeights = (cards) => {
  [...cards].map((card) => {
    rows = card.children;
    [...rows].map((row, index) => {
      let height = 0
      if(requiredHeights[index]!=undefined) {
        height = requiredHeights[index];
      }
      let rowHeight = row.offsetHeight;
      if(rowHeight > height) {
        requiredHeights[index] = rowHeight;
      }
    })
  }) 
}

const setRowHeights = (cards) => {
  [...cards].map(card => {
    rows = card.children;
    [...rows].map((row, index) => {
      row.style.height = requiredHeights[index] + 'px';
      console.log(row.style.height);
    })
  })
}

getRequiredHeights(cards);
setRowHeights(cards);

check out this codepen that shows solution: https://codepen.io/Nadir_Alishly/pen/GRYKREp

Maintain the same height of nested div inside 3 column

3 Answers3

Solution with JavaScript