CSS - How to have children in different parents the same height?

Question

I have a row with 2 columns. Within these columns I have a headline, content and a list. They have a different content length.

What I want to achieve is, that the l

Answer 1

To be able to accomplish that without using script, all the items (h2,p,p,ul) needs to see each other, which technically mean they need to be siblings.

And then, for wider screens where they sit side-by-side, they need to be reordered, where the h2 comes first (order: 0) and so on.

I used one media query, but you might want to add more, to match more of Boostrap's break points.

To add i.e. an outer border, you need to use a combination of border-top/border-left/border-right/border-bottom on the elements, which also need to be altered with the query's, to cover both horizontally and vertically stacked items.

Updated codepen

@media (min-width: 768px) {
  
  .content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }

  .content > * {
    flex-basis: calc(50% - 30px);
  }

  .content h2 {                     /*  1st row  */
    order: 0;
  }
  .content p {                      /*  2nd row  */
    order: 1;
  }
  .content p + p {                  /*  3rd row  */
    order: 2;
    flex-basis: calc(100% - 30px);  /* as only 1 `p` in markup, it need 100% width,
                                       or add an extra empty in the markup  */
  }
  .content ul {                     /*  4th row  */
    order: 3;
  }
  
}

  

    

      

        
        

          
Lorem ipsum Lorem ipsum
          

            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren
          
          

            Lorem ipsum dolor
          
          

            
Lorem ipsum dolor sit amet,
            
Lorem ipsum dolor sit amet,
            
Lorem ipsum dolor sit amet,
            
Lorem ipsum dolor sit amet,
            
Lorem ipsum dolor sit amet,
          
          
Lorem ipsum
          

            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
            sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
          
          

            
Lorem ipsum dolor sit amet,
            
Lorem ipsum dolor sit amet,
            
Lorem ipsum dolor sit amet,
            
Lorem ipsum dolor sit amet,
          
        
        
      
    
  

---

Updated, based on a comment at a duplicate question

If one have many items, one can group them, i.e. 4 per group, to make the CSS much smaller.

Codepen sample

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.container .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.container .row>* {
  flex-basis: calc(100% - 30px);
  min-width: 0;
}

.container .row>div {
  border: 2px solid gray;
}

.container .row>div:nth-child(8n+1),
.container .row>div:nth-child(8n+2),
.container .row>div:nth-child(8n+3),
.container .row>div:nth-child(8n+4) {
  background: lightgray;
}

.container .row>div:nth-child(4n+1) {
  border-width: 2px 2px 0 2px;
  margin-top: 10px;
}

.container .row>div:nth-child(4n+2) {
  border-width: 0 2px;
}

.container .row>div:nth-child(4n+2)+div {
  border-width: 0 2px;
}

.container .row>div:nth-child(4n+4) {
  border-width: 0 2px 2px 2px;
}

@media (min-width: 600px) {
  .container .row>* {
    flex-basis: calc(50% - 30px);
  }
  .container .row>div:nth-child(4n+1) {
    order: 0;
  }
  .container .row>div:nth-child(4n+2) {
    order: 1;
  }
  .container .row>div:nth-child(4n+2)+div {
    order: 2;
  }
  .container .row>div:nth-child(4n+4) {
    order: 3;
  }
  .container .row>div:nth-child(4n+9) {
    order: 4;
  }
  .container .row>div:nth-child(4n+10) {
    order: 5;
  }
  .container .row>div:nth-child(4n+10)+div {
    order: 6;
  }
  .container .row>div:nth-child(4n+12) {
    order: 7;
  }
}

  
  
      
Title 1
      
Test text 1
      
Test text 2
      
Button

      
Title 2
      
Test text 1 is a bit longer to force it to wrap
      
Test text 2
      
Button

      
Title 3 is a bit longer to make it wrap
      
Test text 1 is a bit longer to force it to wrap
      
Test text 2
      
Button
        
      
Title 4
      
Test text 1
      
Test text 2 is a bit longer to force it to wrap
      
Button
  
  
  
  
      
Title 5
      
Test text 1
      
Test text 2
      
Button

      
Title 6
      
Test text 1 is a bit longer to force it to wrap
      
Test text 2
      
Button

      
Title 7 is a bit longer to make it wrap
      
Test text 1 is a bit longer to force it to wrap
      
Test text 2
      
Button
        
      
Title 8
      
Test text 1
      
Test text 2 is a bit longer to force it to wrap
      
Button