Q:

Javascript overlap with slider causing Bootstrap Column Issues

I'm trying to have a split between columns and a set of sliders that are laid on top of each other.  The goal is to have the buttons display content via a collapse toggle while having the sliders movable with an image/number tooltip combo so I can have users see what they're dragging while getting the information about the various icons they're sliding.  Here's what happens

When checked, the column shows 0 or 1-pixel height.
Javascript for the slider appears but tends to overlay on top of the button content
When creating spacers for the column, nothing particularly allows the spacing to split to two columns left and right
When pressing the button for the collapsed div, the content shifts having buttons move around regardless of modification.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/10.1.0/nouislider.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/10.1.0/nouislider.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
      <div class="col-xs-6">
      <div class="spacer">
      <div class = 'slider' id='slider1'></div>
      <div class = 'slider' id='slider2'></div>
      <div class = 'slider' id='slider3'> </div>
      <div class = 'slider' id='slider4'> </div>
  </div>
 </div>
 </div>
       <div class="col-xs-6">
      <div class="spacer">

      <button type="button" data-target="#ConditionOne" class="btn btn-default" data-toggle="collapse">Healthy</button>
         <div id="ConditionOne" class="collapse">
            None
   </div>

      <button type="button"  data-target="#ConditionTwo" class="btn btn-default" data-toggle="collapse">Okay</button>
         <div id="ConditionTwo" class="collapse" >
            &lt;textarea id=&#34;conditionTwoInfo&#34; name=&#34;conditionTwoInfo&#34;&gt;Second Conditional Description&lt;/textarea&gt;
      </div> 
      <button type="button" data-target="#ConditionThree" class="btn btn-default" data-toggle="collapse">Not Okay</button>
         <div id="ConditionThree" class="collapse" >
            None
      </div> 

      <button type="button" data-target="#ConditionFour" class="btn btn-default" data-toggle="collapse">Dead</button>
         <div id="ConditionFour" class="collapse">
            &lt;textarea id=&#34;conditionFourInfo&#34; name=&#34;conditionFourInfo&#34;&gt;Final Conditional Description&lt;/textarea&gt;
         </div>
      </div>

How should I handle both the column issue as well as the button triggering issue as I assume they're tied together.

A:

First what I did is get the height of the slider.  From there I hardcoded the slider's height plus an offset 
.slidespace { height: 275px; //Can be whatever you want
            width: 100% }

Used it as a div:
 <div class="slidespace">     <div class = 'slider' id='slider1'></div>
      <div class = 'slider' id='slider2'></div>
      <div class = 'slider' id='slider3'> </div>
      <div class = 'slider' id='slider4'> </div>
    </div>

This gave me enough space to separate the two.

