用相同宽度但不同高度的div填充页面

Question

我有一个页面，其中包含宽度为49%的引导卡，因此可以将两张卡相邻放置。这很好用，但是某些卡比其他卡更长，因此“两排卡”之间似乎有一些空闲空间。

Example picture of the problem

Example picture with behavior of the 'right column'

如您所见，“左列”中的卡牌没有向上滑动，而右侧的卡牌则向上滑动。

我使用的CSS：

.section {
   min-width: 49%;
   max-widht: 49%;
   float: left;
}

#card_container {
   overflow: hidden;
}

HTML仅为容器一个div，每个部分一个div（带有bootstrap类）。内联样式仅用于示例目的：

<div id="card_container">
<div class="section" style="height: 500px"></div>
<div class="section" style="height: 200px"></div>
<div class="section" style="height: 900px"></div>
<div class="section" style="height: 300px"></div>
</div>

我如何才能实现卡片填充整个空间，因此卡片之间没有剩余空间（默认边距等除外）？