Align elements according to chosen select box

Question

I use Twitter Bootstrap 2.3.2 and chosen plugin for select boxes. I would like to ask how can i align other elements according to box with selected items.

In this screenshot you can see two select boxes and content(elements) under select boxes.

When I select some items, the box overlaps header "Source" and items under the box. I would like to align elements down when some options are selected and align items up (back) when the options are deselected.

jsfiddle

html

    <div id="filter">

<div id="personFilter" class="form-group">

                    <h4> Person filter </h4>

                    <div id="personFilterContain">

                      <h5> Contain </h5>

                      <select data-placeholder= "address" 
                              name="personContainSelect" multiple class="selectPerson"><option value="0"> </option><option value="2">[email protected]</option><option value="3">[email protected]</option><option value="4">[email protected]</option><option value="5">[email protected]</option><option value="6">[email protected]</option><option value="7">[email protected]</option><option value="8">[email protected]</option><option value="9">[email protected]</option><option value="10">[email protected]</option></select>

                    </div>

                    <div id="personFilterNotContain">

                      <h5> Dont contain </h5>

                      <select data-placeholder="address" 
                              tabindex="4" name="personNotContainSelect" multiple class="selectPerson"><option value="0"> </option><option value="2">[email protected]</option><option value="3">[email protected]</option><option value="4">[email protected]</option><option value="5">[email protected]</option><option value="6">[email protected]</option><option value="7">[email protected]</option><option value="8">[email protected]</option><option value="9">[email protected]</option><option value="10">[email protected]</option></select>

                    </div>

                    <div class="checkbox">
                        <label>
                            <input type="checkbox" name="personCheckBox"> Apply
                        </label>
                    </div>

                </div>

                <!-- ********************* Source Filter ********************* -->

                <div id="sourceFilter" class="form-group">

                <h4> Source </h4>

                    <div id="sourceFilterSource">

                      <label class="checkbox inline">
                        <input type="checkbox" name="sourceMailCheckBox"> Mail
                      </label>

                      <label class="checkbox inline">
                        <input type="checkbox" name="sourcePhoneCheckBox"> Phone
                      </label>

                      <label class="checkbox inline">
                        <input type="checkbox" name="sourceDiscussionCheckBox"> Discussion
                      </label>

                    </div>
</div>
<script>
$(document).ready(function () { 
    $('select[name=personNotContainSelect]', this).chosen();
    $('select[name=personContainSelect]', this).chosen();
});
</script>

css

#filter{
    text-align: center;
}

#filter, #details{
  overflow: auto;
}

#filter h4{
  text-align: left;
}

#personFilter, #sourceFilter{
    width: 535px;
    height: 200px;
    margin: 0 auto;
    display: inline-block;
}

#personFilter{
    height: 100px;
    margin-top: 27px;
    display: inline-block;
}

#personFilter h5{
  max-width: 200px;
  padding-left: 1px;
  text-align: left;
  margin-bottom: 5px;
}

#personFilter select{
    width: 250px;
}

#personFilter div{
  display: inline-block;
}

#personFilterContain{
  max-width: 400px;
  float:left;
}

#personFilterNotContain{
  max-width: 400px;
  float: left;
  margin-left: 30px;
}

#personFilter label:last-child{
  width: 0;
}

#personFilter .chosen-container{
  top:-30px;
}

#personFilter .checkbox{
    width: 300px;
    float: left;
    margin-top: -10px;
}

#sourceFilter {
    text-align: left;
    margin-top: 21px;
    position: relative;
}

#sourceFilterSource{
    margin-top: 15px;
}

Answer 1

set ID attr for select (e.g. test):

<select id="test" data-placeholder= "address"...
 ...
</select>

add change event. pay attention on #test_chosen, similar ID att from <select>. suffix _chosen added by plugin.

$('select[name=personContainSelect]', this).chosen().change(function(){           
        var h=$('#test_chosen').height()
        h+=56;//init height of chosen            
        $('#personFilter').height(h)
    });

SOLUTION 2: CSS

#personFilter{
    height: auto;
}