Floating elements next to each other with differing heights

Question

I am trying to place elements next to each other in a fixed width container, where these elements may have different heights (perhaps a max-height could be involved for a range).

This is what I have tried: 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;
}

What I am trying to do is shown here:

Anyone can help me achieve this?