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

I have tried almost all the mentioned methods above, but the flexbox solution won't work correctly with Safari, and the grid layout methods won't work correctly with older versions of IE.

This solution fits all screens and is cross-browser compatible:

.container {margin:15px auto;}
.container ul {margin:0 10px;}
.container li {width:30%; display: table-cell; background-color:#f6f7f7;box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);}

@media (max-width: 767px){
    .container li { display: inline-block; width:100%; min-height:auto!important;}
}

The above method will equal cells height, and for the smaller screens like mobile or tablet, we can use the @media method mentioned above.