css - Display non equal height element with bootstrap -

i want make page posts have non equal height, same width 2 posts on row without use of rows did give every div col-md-6 class gave me 2 divs in row there's gap between elements since different height. this:

and gap becomes bigger if show comments button clicked:

here's working plunker example.
tried pull odd element side , element other, thought maybe when elements floated left stay left, not correct. first looked worked:

but again once show comments button clicked gap reappear , if play little padding elements unaligned:

here's working example in plunker.
, in examples if element long enough push element under other side, other behaviour don't want.
question how display non equal height elements in way there's no gaps , when 1 element long (or show comments button clicked) won't push 1 under other side?
note: i'm looking css solution.

update:

as @gorostas , @dsuess answered use of 2 containers separate elements original design , work visual organisation when come ordering posts problem since loop wont run in 2 separate container , throwing 1 element in each every loop such solution work need write function splits posts , organize them in way post number 1 in left, 2 on right , 3 on left , on, though that's doable it's rather unnecessary going original question i'm looking css solution have 2 other javascript solutions don't use rather found simple , easy implement one, reduces amount of html , javascript code written.

how using 2 columns 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 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>