title: Two columns accordion with Bootstrap
body: <p>I'm using Bootstrap and in the design, we have a two col accordion section that can only have one active drop down state at time. </p>
  
  <p>I'm running into an issue with maintaining the cols after clicking dropdown. The elements on the left keep shifting right under the expanded section. </p>
  
  <p>Please, see the example: <a href="http://www.bootply.com/JCL2XR59WE" rel="nofollow">Bootply</a></p>
  
  <p>CODE: </p>
  
  <pre><code>&lt;div class="col-xs-11 col-sm-7"&gt;
  &lt;div class="panel-group" id="accordion"&gt;
  
  
      &lt;div class="panel panel-default col-sm-6"&gt;
      &lt;div class="panel-heading"&gt;
        &lt;h4 class="panel-title"&gt;
          &lt;a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne1"&gt;
              TEST1
          &lt;/a&gt;
        &lt;/h4&gt;
      &lt;/div&gt;
      &lt;div id="collapseOne1" class="panel-collapse collapse"&gt;
        &lt;div class="panel-body"&gt;
  TESTTESTTESTTESTTEST     
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  
  
  
    &lt;div class="panel panel-default col-sm-6"&gt;
      &lt;div class="panel-heading"&gt;
        &lt;h4 class="panel-title"&gt;
          &lt;a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo2"&gt;
  TEST 2       &lt;/a&gt;
        &lt;/h4&gt;
      &lt;/div&gt;
      &lt;div id="collapseTwo2" class="panel-collapse collapse"&gt;
        &lt;div class="panel-body"&gt;
  TESTTESTTESTTEST        
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  
  
    &lt;div class="panel panel-default col-sm-6"&gt;
      &lt;div class="panel-heading"&gt;
        &lt;h4 class="panel-title"&gt;
          &lt;a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree3"&gt;
  TEST3        &lt;/a&gt;
        &lt;/h4&gt;
      &lt;/div&gt;
      &lt;div id="collapseThree3" class="panel-collapse collapse"&gt;
        &lt;div class="panel-body"&gt;
  TESTTESTTESTTEST       
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  
  
  
    &lt;div class="panel panel-default col-sm-6"&gt;
      &lt;div class="panel-heading"&gt;
        &lt;h4 class="panel-title"&gt;
          &lt;a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseFour4"&gt;
  TEST   4     &lt;/a&gt;
        &lt;/h4&gt;
      &lt;/div&gt;
      &lt;div id="collapseFour4" class="panel-collapse collapse"&gt;
        &lt;div class="panel-body"&gt;
  TESTTESTTESTTEST       
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  
  
  
  
  
    &lt;div class="panel panel-default col-sm-6"&gt;
      &lt;div class="panel-heading"&gt;
        &lt;h4 class="panel-title"&gt;
          &lt;a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseFive5"&gt;
  TEST  5      &lt;/a&gt;
        &lt;/h4&gt;
      &lt;/div&gt;
      &lt;div id="collapseFive5" class="panel-collapse collapse"&gt;
        &lt;div class="panel-body"&gt;
  TESTTESTTESTTEST        
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  
  
    &lt;div class="panel panel-default col-sm-6"&gt;
      &lt;div class="panel-heading"&gt;
        &lt;h4 class="panel-title"&gt;
          &lt;a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseSix6"&gt;
  TEST    6    &lt;/a&gt;
        &lt;/h4&gt;
      &lt;/div&gt;
      &lt;div id="collapseSix6" class="panel-collapse collapse"&gt;
        &lt;div class="panel-body"&gt;
  TESTTESTTESTTEST       
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="panel panel-default col-sm-6"&gt;
      &lt;div class="panel-heading"&gt;
        &lt;h4 class="panel-title"&gt;
          &lt;a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseSeven"&gt;
  TEST  7      &lt;/a&gt;
        &lt;/h4&gt;
      &lt;/div&gt;
      &lt;div id="collapseSeven" class="panel-collapse collapse"&gt;
        &lt;div class="panel-body"&gt;
  TESTTESTTESTTESTTESTTEST   
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  
    &lt;div class="panel panel-default col-sm-6"&gt;
      &lt;div class="panel-heading"&gt;
        &lt;h4 class="panel-title"&gt;
          &lt;a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseEight"&gt;
  TEST  8      &lt;/a&gt;
        &lt;/h4&gt;
      &lt;/div&gt;
      &lt;div id="collapseEight" class="panel-collapse collapse"&gt;
        &lt;div class="panel-body"&gt;
  TESTTESTTESTTESTTESTTEST
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  
  
  
    &lt;div class="panel panel-default col-sm-6"&gt;
      &lt;div class="panel-heading"&gt;
        &lt;h4 class="panel-title"&gt;
          &lt;a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseNine"&gt;
  TEST  9      &lt;/a&gt;
        &lt;/h4&gt;
      &lt;/div&gt;
      &lt;div id="collapseNine" class="panel-collapse collapse"&gt;
        &lt;div class="panel-body"&gt;
  TESTTESTTESTTESTTESTTEST       
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  
  
  
    &lt;div class="panel panel-default col-sm-6"&gt;
      &lt;div class="panel-heading"&gt;
        &lt;h4 class="panel-title"&gt;
          &lt;a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTen"&gt;
  TEST     10   &lt;/a&gt;
        &lt;/h4&gt;
      &lt;/div&gt;
      &lt;div id="collapseTen" class="panel-collapse collapse"&gt;
        &lt;div class="panel-body"&gt;
  TESTTESTTESTTESTTESTTEST      
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  
  
  
  
  
    &lt;div class="panel panel-default col-sm-6"&gt;
      &lt;div class="panel-heading"&gt;
        &lt;h4 class="panel-title"&gt;
          &lt;a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseEleven"&gt;
  TEST  11      &lt;/a&gt;
        &lt;/h4&gt;
      &lt;/div&gt;
      &lt;div id="collapseEleven" class="panel-collapse collapse"&gt;
        &lt;div class="panel-body"&gt;
  TESTTESTTESTTESTTESTTEST       
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  
  
  
    &lt;div class="panel panel-default col-sm-6"&gt;
      &lt;div class="panel-heading"&gt;
        &lt;h4 class="panel-title"&gt;
          &lt;a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwelve"&gt;
  TEST    12    &lt;/a&gt;
        &lt;/h4&gt;
      &lt;/div&gt;
      &lt;div id="collapseTwelve" class="panel-collapse collapse"&gt;
        &lt;div class="panel-body"&gt;
  TESTTESTTESTTESTTEST      
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  
  
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Appreciate any help! </p>