CSS responsive equal height columns with buttons under each div that wrap properly

Question

Hello! I know this has been a common/recurring thing for developers. Something that should be so easy but never is. :( I've looked around and found some solutions but nothing that's working for my particular needs. If you look at the attached image, you will see what I'm trying to accomplish. In full width mode (desktop perhaps), two divs in each column with a button under each div (of course the buttons will be styled divs but for the sake of clarity, I'll call them buttons). The two divs above the buttons must be equal height even though they don't contain equal content. When viewed on mobile, the div/button pairs should wrap as shown in bottom part of the image - so that the proper button stays with its div.

Any help would be greatly appreciated!

Answer 1

If you don't mind a JavaScript approach, something like this would work:

JSFiddle

<div class="outer">
    <div class="inner">Some content.</div>
    <button>Button</button>
</div>
<div class="outer">
    <div class="inner">
        This div has more content. This div has more content. This div has more content.
    </div>
    <button>Button</button>
</div>

div.outer {
    margin-bottom: 3px;
    display: inline-block;
    vertical-align: top;
}

div.outer, button { width: 80px; }

div.inner { background-color: yellow; }

@media (max-width: 400px) {
  div.outer {
      display: block;
  }
}

var inners = document.getElementsByClassName("inner");
var maxHeight = 0;
for (var i = 0; i < inners.length; i++) {
    if (inners[i].offsetHeight > maxHeight)
        maxHeight = inners[i].offsetHeight;
}
for (var i = 0; i < inners.length; i++)
    inners[i].style.height = maxHeight + 'px';