0

I know this answer has been asked already (in different way tho), but didn't find the answer yet.

So I have this structure: 

<div>
<div class="col">
    <div class="row">
        1
    </div>
    <div class="row">
        2 <br> 3
    </div>
    <div class="row">
        3
    </div>
</div>
<div class="col">
    <div class="row">
        1
    </div>
    <div class="row">
        2
    </div>
    <div class="row">
        3
    </div>
</div>
<div class="col">
    <div class="row">
        1
    </div>
    <div class="row">
        2
    </div>
    <div class="row">
        3
    </div>
</div>

enter image description here

How can I equalise the height of the rows inside the cols if they don't share the same parent?

Is there any way using CSS only?

TylerH
  • 20,799
  • 66
  • 75
  • 101
alnoco0905
  • 37
  • 9
  • Are you using Bootstrap? Flexbox? Etc. – TylerH Apr 03 '20 at 17:39
  • What is meant by equalize? All rows to have height of tallest row? – Anurag Srivastava Apr 03 '20 at 17:42
  • @TylerH yes, I’m using Bootstrap, but that’s not relevant. – alnoco0905 Apr 03 '20 at 17:44
  • @Alexandru Actually it is relevant. I needed to know more details about your code (see [mcve] so that I know which questions to close this as a duplicate of. – TylerH Apr 03 '20 at 17:45
  • @AnuragSrivastava the rows should be the same height as the ones on the same line. For example col1-row2, col2-row2, col3-row3 – alnoco0905 Apr 03 '20 at 17:45
  • this question should be reopened. The easiest way to solve this is to change the orientation of the html and use flexbox. Please vote to reopen so I can post solution – DCR Apr 03 '20 at 17:56

0 Answers0