如何使用CSS下推绝对定位的div

我有一个包含顶部区域和底部区域的容器。顶部区域包含两个附加div（以后），这些div将包含动态内容。底部是绝对定位的div，始终应将其放置在底部，无论顶部包含多少内容，都应将底部向下推。由于某种原因，我不知道，它失败了。有人可以帮我吗？

我的HTML看起来像这样：

<div class="container">
  <div class="top">
    <div class="left">
      <h3>
        some left header
      </h3>
      <p>
       some left text
      </p>
    </div>
   <div class="right">
    <h3>
      some right header
    </h3>
    <p>
      some right text
    </p>
    <p>
      some right text
    </p>
  </div>
 </div>
 <div class="bottom">
  <p>
    some bottom text
  </p>
  <p>
    more bottom text
  </p>
</div>

和我的CSS：

.container {
  position: relative;
  border: 1px solid black;
  min-height: 255px
}

.top {
  display: flex;
  border: 1px solid black;
 }

.left {
  float: left;
  border: 1px solid red;
 }
.right {
  float: right;
  border: 1px solid green;
}
.bottom {
  position: absolute; // here the issue appears
  bottom: 0;          // here too
}

我有一个JSFiddle，它的外观或想要实现的功能

另外，我还有一个JSFiddle，它与绝对div的外观如何。