How to get an element to maintain its position in column structure when the height changes

Question

I have put together a CodePen to illustrate the issue I'm trying to solve - http://codepen.io/nicknoop/pen/rMgPXX.

Elements are displayed using CSS columns; within each element there is some hidden text, revealed via jQuery. If I expand the element in the third column (out of 4), the expanded element jumps to the bottom of the second column. Presumably the browser distributes space equally between the columns, causing this issue (I've seen some differences between browsers).

I'd like to know if there is a way to maintain the position of the element when it is expanded, i.e. to stay in column 3.

Here is the code I've been working with:

HTML:

<div class="container">
  <div class="inner">
    <div class="inner-head"></div>
    <h6>click to reveal text - <span class="highlighted">to be viewed with 4-columns, min width 960px</span></h6>
    <div class="inner-body">
      <div class="inner-arrow">&darr;</div>
      <p class="inner-p">
        Some text in here with varying lengths!
      </p>
    </div>
  </div>
.
. repeating this "inner" div to create different elements.
.
</div> <!-- end container --> 

CSS:

.container {
  color: #444;
  column-count: 2;
  column-gap: 5px;
  column-width: 10em;
  height: auto;
  margin: 0 auto;
  max-width: 960px;
  padding: 0 20px;
  width: 100%;
}
  @media screen and (min-width: 600px) {
    .container {
      column-count: 3;
    }
  }
  @media screen and (min-width: 960px) {
    .container {
      column-count: 4;
    }
  }

.inner {
  background: rgba(0,0,0,.2);
  border: 1px solid rgba(255,255,255,.07);
  column-break-inside: avoid;
  display: inline-block;
  margin: 5px;
  padding: 10px;
  width: 90%;
}
.inner-head {
  background: rgba(0,0,0,.4);
  height: 100px;
  margin-bottom: 10px;
  width: 100%;
}
.inner h6 {
  color: #777;
  margin-bottom: 5px;
  text-align: center;
}
.inner-arrow {
  background: #002;
  border-radius: 5px;
  color: red;
  cursor: pointer;
  margin: 0 auto;
  text-align: center;
  width: 30px;
}

.highlighted {
  color: tomato;
}

JS:

jQuery(document).ready(function() {

    jQuery(document).ready(function(){
        jQuery('.inner .inner-p').slideUp();
        jQuery('.inner .inner-arrow').click(function(){
            jQuery(this).next('.inner .inner-p').slideToggle('slow');
        });
    });

});