Display non equal height element with bootstrap - css

Question

I want to make a page with posts that have a non equal height, but same width like two posts on a row without the use of rows I did give every div a col-md-6 class which gave me two divs in a row but there's a gap between the elements since they are with different height.
like this:
and the gap becomes bigger if the show comments button is clicked:
here's a working plunker with this example.
I tried to pull the odd element to a side and the even element to the other, I thought maybe when elements are floated left they will stay left, but that was not correct.
first it looked like it worked:
but again once the show comments button is clicked the gap reappear and if I play a little with the padding the elements will be unaligned:
here's a working example in this plunker.
And in all this examples if an element is long enough it will push the element under it to the other side, which is the other behaviour that I don't want.
So the question is how could I display non equal height elements in a way that there's no gaps and that when one element is too long (or the show comments button is clicked) it won't push the one under it to the other side?
Note: I'm looking for a CSS solution.
update:
As #gorostas and #dsuess answered the use of two containers to separate the elements is the original design and it work as a visual organisation but when it come to ordering the posts that will be a problem since the loop wont run in two separate container and throwing one element in each every loop so for such a solution to work I need to write a function that splits the posts and organize them in a way that the post number 1 will be in the left, 2 on the right and 3 on the left and so on, even though that's doable it's rather unnecessary so going back to my original question I'm looking for a CSS solution I already have 2 other JavaScript solutions I don't like to use I rather found a simple and easy to implement one, that reduces the amount of HTML and JavaScript code written.

Answer 1

How about using 2 columns with each containing boxes:
$('div').on('click', function () {
$(this).toggleClass('expanded')
});
.column{
width: 48%;
float: left;
margin: 0 1%;
}
.box {
margin: 5px 1%;
width: 100%;
height: 40px;
border: 1px solid black;
background: #c3c3c3;
}
.expanded {
height: 120px;
background: #999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>click the boxes</h2>
<div class="column">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>
<div class="column">
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
</div>

Answer 2

What you think abaout using Masonry?
Here is working fiddle
http://jsfiddle.net/52VtD/9313/
$(document).ready(function () {
var $container = $('.masonry');
$container.function () {
$container.masonry({
itemSelector: '.post-box',
columnWidth: '.post-box',
transitionDuration: 0
});
});
});
UPDATE FINAL
<div class="row">
<div class="col-xs-6 col-md-6 col-sm-6">
1
</div>
<div class="col-xs-6 col-md-6 col-sm-6">
2
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-6 col-sm-6">
3
</div>
<div class="col-xs-6 col-md-6 col-sm-6">
4
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-6 col-sm-6">
5
</div>
<div class="col-xs-6 col-md-6 col-sm-6">
6
</div>
</div>
Working fiddle
http://jsfiddle.net/52VtD/9325/