How do I keep two side-by-side divs the same height?

Question

I have two divs side by side. I\'d like the height of them to be the same, and stay the same if one of them resizes. I can\'t figure this one out though. Ideas?

To c

Answer 1

The CSS grid way

The modern way of doing this (which also avoids having to declare a

-wrapper around every two items) would be to make use of a CSS grid. This also gives you easy control on the gaps between your item rows/columns.

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* or simply "1fr 1fr;" */
  grid-row-gap: 10px; 
  grid-column-gap: 10px;
}

.grid-item {
  background-color: #f8f8f8;
  box-shadow: 0 0 3px #666;
  text-align: center;
}

.grid-item img {
  max-width: 100%;
}

  
1 
1.1
1.1.1
  
2
  
3
    
    3.1
  
  
4
  
5 
1.1
1.1.1
  
6
    6.1
  
7
  
8
  
9 
1.1
1.1.1
  
10
  
11
    
    11.1
  
  
12