浮动元素彼此相邻，具有不同的高度

Question

我试图将元素放在一个固定宽度的容器中，这些元素可能具有不同的高度（可能涉及范围的最大高度）。

这是我尝试过的： https://jsfiddle.net/kc6uyr3d/1/

.container {
  position: relative;
  width: 550px;
}
.item {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background-color: red;
  display: inline-block;
  float: left;
  margin: 0 5px 5px 0;
}

.two {
  height: 150px;
}

我要做的是在这里显示：

任何人都可以帮我实现这个目标吗？