在行中显示div，没有多余的空白

Question

我正在尝试在2行中显示3个div，我希望第3个div恰好位于第一个div的正下方，但是由于第二个div的高度大于第一个div的高度，因此第一个div会得到一些多余的空间使第一和第二div的高度相同。有什么办法可以容纳第一个div的高度并将最后一个div推到其下方吗？

这是我面临的问题的示例：

.container {
  display: flex;
  flex-wrap: wrap;
}

.large {
  background-color: blue;
  width: 67%;
  padding-top: 100px;
  box-sizing: border-box;
  border: 5px solid purple;
}

.small {
  background-color: green;
  width: 33%;
  padding-top: 150px;
}

<div class="container">
  <div class="large"></div>
  <div class="small"></div>
  <div class="large"></div>
</div>

View on Codepen

我一直在研究砌筑，但是由于我只使用3 div而不是巨大的图像库，所以我想知道是否还有另一种方法可以达到相同的效果。