如何根据呼吸内容将所有div设置为相同的高度

尝试制作网格样式的网站时，我经常遇到一个问题，我该如何根据同一行中的最高div将行中的所有div设置为相同的高度。其中一个div将包含一组div，这些div需要根据该高度进行拉伸并自动填充，以便所有内容一起移动。

将Divs设置为相同的高度必须基于div本身内部的内容。例如，当文本框调整大小时，图片也应保持相同的高度，然后所有“图标”也应拉伸并保持相同的高度。

这是我目前拥有的：

<div class="container">

  <div class="half">
    <h1>Title</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at ipsum tortor. Etiam ut lacus auctor, venenatis mauris vitae, scelerisque dolor. Mauris pulvinar purus libero, eget congue sem lobortis vitae.</p>
  </div>

  <div class="quater">
    <img src="http://i68.tinypic.com/6yo87o.jpg"></img>
  </div>

  <div class="quater social">
    <div class="third">Icon</div>
    <div class="third">Icon</div>
    <div class="third">Icon</div>
    <div class="third">Icon</div>
    <div class="third">Icon</div>
    <div class="third">Icon</div>
  </div>

</div>

CSS：

.half {
  width: 50%;
  background: yellow;
  float: left;
}

.quater {
  width: 25%;
  background: red;
  float: left;
}

.third {
  width: 33.33333333%;
  background: blue;
  float: left;
  color: white;
}

img {width: 100%;}

https://jsfiddle.net/atp1agmk/4/

这是我想要的结果：

我也不介意是否必须通过JavaScript完成