使用CSS创建两个等高的布局列，并在右列中插入三个等高的堆叠列

Question

​

​

我不能使用table标签，也不能使用flexbox。我们的访问者大多是使用IE8的老年人。

我正在尝试创建两个等高的布局列，它们分别在左侧和右侧浮动。

左列包含两个不等高的堆叠div。但是这些div应该扩展到填充col1的总高度。

右列包含三个应具有相等高度的堆叠列。这些div还应该填充col2的总高度。

总体而言，col1和col2应该始终具有相同的高度。

我不能为每个列设置固定的px大小，因为里面的内容每天都可能不同。我希望col1和col2的内容都扩展到适合的总高度，这样就没有剩余的空间在底部。

我的选择是使用display: table；但是如果你有什么好的建议，请让我知道。

(仅供参考，图像中显示的所有div都有一个边框。)

<div class="container">

 <div class="left">
  <div class="col-1-1"></div>
  <div class="col-1-2"></div>
 </div>

 <div class="right">
  <div class="col-2-1"></div>
  <div class="col-2-2"></div>
  <div class="col-2-3"></div>
</div>

任何帮助都将不胜感激。