CSS response columns with same height with buttons below each div that wrap properly

Question

! , / . -, , .:( , . , , . (, ) divs div (, div, ). div , . div/button , , div.

!

Answer 1

JavaScript, - :

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';

Answer 2

, " " - JS (Josh Bjelovuk ), . " ", , CSS, .

<div class="container">
    <div><p>This one has a little content</p></div>
    <a class="show-small" href="Javascript;">Click Here!</a>
    <div><p>What is the difference between ignorance and apathy? I don’t know, and I don’t care.</p></div>
    <a class="show-small" href="Javascript;">Click Here!</a>
</div>
<div class="container hide-small">
    <a href="Javascript;">Click Here!</a>
    <a href="Javascript;">Click Here!</a>
</div>

 

body { 
    margin: 0; 
    padding: 40px;
}
.container {
    display: table;
    background: rgba(0, 0, 0, 0);
    padding: 0;
    border-spacing: 10px 3px;
    border-collapse: separate;
    width: 100%;
}
div {
    background: #333;
    color: #FFF;
    width: 48%;
    margin: 0;
    display: table-cell;
}
div p {
    padding: 20px;
    margin: 0;
}
a {
    display: table-cell;
    background: #2CB32C;
    color: #FFF;
    border-radius: 5px;
    padding: 4px 0;
    text-align: center;
}
.show-small { display: none; }

@media screen and (max-width: 30em) {
    .container { display: block; }
    div > div {
        display: block;
        width: 100%;
    }
    a { border-radius: 0; }
    .show-small { display: block; }
    .hide-small { display: none; }
}

DEMO