Maintain same height in elements inside columns located side by side with CSS

Question

I have a template like this:

I want to maintain the same height between each item of both columns, depending on the one that has the biggest height, but only wh

Answer 1

you may take a look at @supports to filter possible display:option or subgrid .

example with display:contents

.title {
  background: #b6fac0;
}

.content {
  background: #b6b6fa;
}

.footer {
  background: #f7f5b5;
}

.col-50 {
  border: 1px solid red;
}

@supports (display: contents) {
  .row.responsive-sm {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 1em;
  }
  .col-50 {
    display: contents
  }
  .title {
    grid-row: 1
  }
  .content {
    grid-row: 2;
  }
  @media screen and (max-width:500px) {
    /* set the break point to the right value */
    .row.responsive-sm,
    .col-50 {
      display: block;
    }
  }
}

  

    

      

        Veeeeeeeeeeeeeeery veeeeeeeeeery veeeeeeeeeeeeeeery veeeeeeeeeery veeeeeeeeeeeeeeery veeeeeeeeeery veeeeeeeeeeeeeeery veeeeeeeeeery loooooooooooong title 
      

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rhoncus neque vitae lorem varius placerat. Donec blandit mi non mauris ornare faucibus. Quisque mollis nunc in tortor dapibus, et ornare lacus pharetra
      
      

        Footer a
      
    
    

      

        Title 
      

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rhoncus neque vitae lorem varius placerat. Donec blandit mi non mauris ornare faucibus. Quisque mollis nunc in tortor dapibus, et ornare lacus pharetra. Phasellus tortor tortor, luctus
        in dapibus sed, ultrices eget lorem. Morbi vehicula fermentum arcu, nec egestas augue. Fusce orci ex, sodales ut tellus sit amet, pretium pulvinar odio. Suspendisse potenti. Phasellus convallis metus sed erat rhoncus, eu tristique lacus fermentum.
      
      

        Footer
      
    
  

usefull for a fast check on supports on properties: https://caniuse.com/