CSS display:table-cell content in wrong position

Question

I have a simple structure of div behaving as tables that is one row with two columns, one with 80% and the other with the remaining space. In fact, the first column is two 80% columns, but I only show one at once hidding the other with display: none:

$("#change").on("click", function() {
 $(".table .container")
   .toggleClass("hidden");
});

.table {
  display: table;
  width: 100%;
  height: 185px;
  padding: 10x 30px;
}

.table div {
  display: table-cell;
  color: #fff
}

.table .container {
  width: 80%;
  background-color: #ccc
}
.table .hidden {
  display: none
}

.table .side-bar {
  background-color: #333;
  padding: 0 20px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="table">
  <div class="container">1</div>
  <div class="container hidden">
    2
  </div>
  <div class="side-bar">3</div>
</div>
<button id="change">
Toggle column
</button>

It works well as pure html and css. But these two columns hold a widget each. The second column haves a listView widget, which creates a bunch of divs inside it. Those divs inflicts in the third column content. It pulls the content down:

$("#change").on("click", function() {
 $(".table .container")
   .toggleClass("hidden");
});

.table {
  display: table;
  width: 100%;
  height: 185px;
  padding: 10x 30px;
}

.table div {
  display: table-cell;
  color: #fff
}

.table .container {
  width: 80%;
  background-color: #ccc
}
.table .hidden {
  display: none
}

.table .side-bar {
  background-color: #333;
  padding: 0 20px
}
.table .container .insider {
  height: 300px;
  float: left;
  width: 80px; 
  height: 80px;
  margin: 5px;
  background-color: #fff;
  color: #000
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table">
  <div class="container">1</div>
  <div class="container hidden">
    <div class="insider">2</div>
    <div class="insider">2</div>
    <div class="insider">2</div>
    <div class="insider">2</div>
    <div class="insider">2</div>
    <div class="insider">2</div>
    <div class="insider">2</div>
    <div class="insider">2</div>
  </div>
  <div class="side-bar">3</div>
</div>
<button id="change">
Toggle container
</button>

Check how the third column's(the black one) content is pulled down when you toggle the state of the columns. The divs inside it(with .insider class) are generated by the javascript widget, so I have no control over it style. I think it is possible to change it, but I prefer not to do so.

How can I change the columns without changing the third column's content position?

Answer 1

Just add following css:

.table div {
  vertical-align: top;
}