title: Bootstrap- Left Columns Make the right columns move downwards when expanded
body: <p>I have two columns inside a container. The left column is actually a filter and I want it to expand and collapse without moving the right column of the NEXT ROW downwards.
  <img src="https://i.stack.imgur.com/sUgZF.jpg" alt="enter image description here"></p>
  
  <p>In the image you can see the <strong>"Speciality"</strong> Box. When I click on the arrow at the bottom of that box. the menu inside expands. It makes the column under it <strong>Charges</strong> to move downwards, which is okay. </p>
  
  <p>But Along with the charges box. the column next to it also goes down. I want Right Columns to stay where they are. And only the left ones to move up and down.
  Any leads ?</p>
  
  <p>Here's my HTML code</p>
  
  <pre><code>&lt;div class="container"&gt;
             &lt;div class="col-xs-3"&gt;
                &lt;div class="content_left"&gt;
                  &lt;span class="expand-collapse-text exp"&gt;&lt;i class="fa fa-sort-desc"&gt;&lt;/i&gt;  &lt;/span&gt;
                       &lt;div class="left-title"&gt; Speciality &lt;/div&gt;
                           &lt;div class="content-left1"&gt;
                               &lt;span class="expand-collapse-text exp" &gt; &lt;i class="fa fa-sort-desc"&gt;&lt;/i&gt;&lt;/span&gt;
                           &lt;div class="left-title"&gt; Multi Speciality &lt;/div&gt;
                              &lt;div class="left_options"&gt;
                                 &lt;input value="1" id="ca1" class="handleclick" type="checkbox" name="ca"&gt;&lt;label for="ca1"&gt;&lt;span&gt;&lt;/span&gt;Heart&lt;/label&gt;                 &lt;br&gt;
  
                                 &lt;input value="2" id="ca2" class="handleclick" type="checkbox" name="ca"&gt;&lt;label for="ca2"&gt;&lt;span&gt;&lt;/span&gt;General&lt;/label&gt;                   &lt;br&gt;
  
                                 &lt;input value="3" id="ca3" class="handleclick" type="checkbox" name="ca"&gt;&lt;label for="ca3"&gt;&lt;span&gt;&lt;/span&gt;Dental&lt;/label&gt;                    &lt;br&gt;
  
                                 &lt;input value="16" id="ca16" class="handleclick" type="checkbox" name="ca"&gt;&lt;label for="ca16"&gt;&lt;span&gt;&lt;/span&gt;Maternity&lt;/label&gt;                  &lt;br&gt;
  
                                 &lt;input value="17" id="ca17" class="handleclick" type="checkbox" name="ca"&gt;&lt;label for="ca17"&gt;&lt;span&gt;&lt;/span&gt;Orthopedic&lt;/label&gt;                 &lt;br&gt;
  
                                 &lt;input value="18" id="ca18" class="handleclick" type="checkbox" name="ca"&gt;&lt;label for="ca18"&gt;&lt;span&gt;&lt;/span&gt;Pediatric&lt;/label&gt;                  &lt;br&gt;
  
                                 &lt;input value="19" id="ca19" class="handleclick" type="checkbox" name="ca"&gt;&lt;label for="ca19"&gt;&lt;span&gt;&lt;/span&gt;Mental Health&lt;/label&gt;
  
                                       &lt;br&gt;
                             &lt;/div&gt;
                                 &lt;span class="expand-collapse-text exp"&gt; &lt;i class="fa fa-sort-desc"&gt;&lt;/i&gt; &lt;/span&gt;
                                   &lt;div class="left-title"&gt; Speciality &lt;/div&gt;
                                 &lt;span class="expand-collapse-text exp"&gt; &lt;i class="fa fa-sort-desc"&gt;&lt;/i&gt; &lt;/span&gt;
                                   &lt;div class="left-title"&gt; Speciality &lt;/div&gt;
                          &lt;/div&gt;
                   &lt;/div&gt;
          &lt;/div&gt;
  
  
  
  
  &lt;div class="col-xs-9 right-box"&gt;
  
  
      &lt;div class="content_header col-md-12"&gt;
          &lt;div class="col-xs-1"&gt;
              &lt;img src="#" alt=""/&gt;
          &lt;/div&gt;
          &lt;div class="col-xs-4 Hospital_name"&gt;
              Cloud Nine Hospital
          &lt;/div&gt;
          &lt;div class="col-xs-3 Hospital_speciality Hospital_type"&gt;
              Maternity Hospital
          &lt;/div&gt;
          &lt;div class="col-xs-1 hospital_location Hospital_location"&gt;
              Bangalore
          &lt;/div&gt;
          &lt;div class="col-xs-1 col-xs-offset-1"&gt;
              ★★★★★
          &lt;/div&gt;
          &lt;div class="col-xs-1"&gt;
              4.2
  
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="Hospital_Details"&gt;
          &lt;div class="col-xs-5" style="margin-left: -3.55%;"&gt;
              &lt;img src="images/1.jpg" class="img-responsive"/&gt;
          &lt;/div&gt;
          &lt;div class="col-xs-7 fee"&gt;
              Consultation fee: &lt;span style="margin-left: 10%; color: skyblue"&gt;Rs: 500&lt;/span&gt; &lt;span style="margin-left: 3%; color: gainsboro"&gt;Onwards&lt;/span&gt;
              &lt;br&gt;
              &lt;br&gt;
  
              Ward Charges &lt;span style="margin-left: 13.5%; color: skyblue"&gt;Rs: 500&lt;/span&gt; &lt;span style="margin-left: 3%; color: gainsboro"&gt;Onwards&lt;/span&gt;
              &lt;br&gt;
              &lt;br&gt;
              &lt;br&gt;
              Contact: &lt;span style="margin-left: 23%; color: darkblue"&gt;Jayanagar&lt;/span&gt; &lt;span style="margin-left: 3%; color: skyblue"&gt;9785461238&lt;/span&gt;
              &lt;br&gt;
              &lt;br&gt;
              &lt;div class="col-xs-5"&gt;
                  &lt;ul class="list-inline list-unstyled"&gt;
                      &lt;li&gt;&lt;img src="#"/&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;img src="#"/&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;img src="#"/&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;img src="#"/&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
              &lt;br&gt;
              &lt;hr&gt;
              &lt;div class="col-xs-12"&gt;
                  &lt;div class="col-xs-5"&gt; View More Details &lt;span&gt; &gt; &lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div class="col-xs-offset-2 col-xs-5"&gt;
                      &lt;input type="submit" value="Book Appointment" class="appointment" /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
          &lt;/div&gt;     
  
  
  
  
          &lt;!-- Column two--&gt;
  
      &lt;div class="container"&gt;
          &lt;div class="div col-xs-3"&gt;
              &lt;div class="content_left"&gt;
                &lt;span class="expand-collapse-text exp"&gt; &lt;i class="fa fa-sort-desc"&gt;&lt;/i&gt;  &lt;/span&gt;
                  &lt;div class="left-title"&gt;
                      Charges &lt;select name="Charges"&gt;
                                     &lt;option&gt;In Rupees &lt;/option&gt;
                                     &lt;option&gt;&lt;/option&gt;
                              &lt;/select&gt; 
                  &lt;/div&gt;
                                   &lt;div class="content-left1"&gt; 
                                    &lt;input type="text" id="amount" readonly &gt;
                                     &lt;div id="slider-range"&gt;&lt;/div&gt; 
                                     &lt;br&gt;
                                     &lt;input type="text" id="amount1" readonly&gt;
                                     &lt;div id="slider-range1"&gt;&lt;/div&gt; 
                                 &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
     &lt;div class="col-xs-9 right-box"&gt;
       &lt;div class="content_header col-md-12"&gt;
          &lt;div class="col-xs-1"&gt;
              &lt;img src="#" alt=""/&gt;
          &lt;/div&gt;
          &lt;div class="col-xs-4 Hospital_name"&gt;
              Cloud Nine Hospital
          &lt;/div&gt;
          &lt;div class="col-xs-3 Hospital_speciality Hospital_type"&gt;
              Maternity Hospital
          &lt;/div&gt;
          &lt;div class="col-xs-1 hospital_location Hospital_location"&gt;
              Bangalore
          &lt;/div&gt;
          &lt;div class="col-xs-1 col-xs-offset-1"&gt;
              ★★★★★
          &lt;/div&gt;
          &lt;div class="col-xs-1"&gt;
              4.2
  
          &lt;/div&gt;
      &lt;/div&gt;
  
        &lt;div class="Hospital_Details"&gt;
          &lt;div class="col-xs-5" style="margin-left: -3.55%;"&gt;
              &lt;img src="images/1.jpg" class="img-responsive"/&gt;
          &lt;/div&gt;
          &lt;div class="col-xs-7 fee"&gt;
              Consultation fee: &lt;span style="margin-left: 10%; color: skyblue"&gt;Rs: 500&lt;/span&gt; &lt;span style="margin-left: 3%; color: gainsboro"&gt;Onwards&lt;/span&gt;
              &lt;br&gt;
              &lt;br&gt;
  
              Ward Charges &lt;span style="margin-left: 13.5%; color: skyblue"&gt;Rs: 500&lt;/span&gt; &lt;span style="margin-left: 3%; color: gainsboro"&gt;Onwards&lt;/span&gt;
              &lt;br&gt;
              &lt;br&gt;
              &lt;br&gt;
              Contact: &lt;span style="margin-left: 23%; color: darkblue"&gt;Jayanagar&lt;/span&gt; &lt;span style="margin-left: 3%; color: skyblue"&gt;9785461238&lt;/span&gt;
              &lt;br&gt;
              &lt;br&gt;
              &lt;div class="col-xs-5"&gt;
                  &lt;ul class="list-inline list-unstyled"&gt;
                      &lt;li&gt;&lt;img src="#"/&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;img src="#"/&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;img src="#"/&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;img src="#"/&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
              &lt;br&gt;
              &lt;hr&gt;
              &lt;div class="col-xs-12"&gt;
                  &lt;div class="col-xs-5"&gt; View More Details &lt;span&gt; &gt; &lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div class="col-xs-offset-2 col-xs-5"&gt;
                      &lt;input type="submit" value="Book Appointment" class="appointment" /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
          &lt;/div&gt;     
  </code></pre>