How to ignore the margin inline blocks create with different heights? [duplicate]

Question

I have an issue where the blocks stack by 2, and the next 2 blocks start at the end of the first 2 blocks. As shown in this JSFiddle demo.

HTML:

<div class="container">
  <div class="inline">
  A div with less content than that one >
  </div>
  <div class="inline">
  A div with more content than the one on the left. Now Inline 3 goes down to where this div ends. I want to move it up however, so it's right under the div that's above Inline 3.
  </div>
  <div class="inline">
  Inline 3
  </div>
  <div class="inline">
  Inline 4
  </div>
</div>

CSS:

.container {
  width:600px;
  background-color:rgb(40,40,40);
}

.inline {
  width:calc(50% - 22px);
  display:inline-block;
  vertical-align:top;
  color:white;
  background-color:#e74c3c;
  text-align:center;
  margin:5px 10px;
}

Output:

Note: This doesn't take up the white space created by the top-right div.

Expected/wanted output:

Note: This does make use of the whitespace.

I'm aware that this is possible with 2 columns, but I don't want to use 2 columns. Because I must be able to remove some div's without having unequal content in the columns.

Answer 1

I had the same problem at the website i created. i used masonry to solve that: http://masonry.desandro.com/