How to adjust position of a div relative to a div above it upon height change?

Question

I am using selectize.js in multiple input fields in a form.

When adding tags, the input field grows in height accordingly.

The container below however is not adjusting its vertical position accordingly.

In the official demo, the desired behaviour is occuring, which can be seen by going to:

http://brianreavis.github.io/selectize.js/

And then scrolling down and clicking Plugins, and scrolling to the drag_drop demo.

In my implementation however it is not:

jsFiddle

http://jsfiddle.net/rwone/q84VX/4/

I have tried making the containing div, .field-row, relative but that doesn't seem to have an effect.

HTML

<div class="my_form_page_content">
<form id="my_form_name" name="my_form_name">
    <div class="my_form_container">
    <div class="field-row" >
        <div class="my_form_left">
        <p>field one</p>
        </div>
        <div class="my_form_right">
        <div class="input_wrapper">
            <input  type="text" id="input-sortable-1" class="input-sortable demo-default" value="input 1 value, lala1, lala1a" />
        </div>
        </div>        
    </div>
    <div class="field-row" > 
        <div class="my_form_left">
        <p>field two</p>
        </div>
        <div class="my_form_right">
            <div class="input_wrapper">
            <input  type="text" id="input-sortable-2" class="input-sortable demo-default" value="input 2 value, lala2, lala2a" />
            </div> 
         </div> 
    </div>
    <div class="my_form_button">
        <button type="submit">submit</button>
    </div>
   </div>
</form>
</div>

CSS

.my_form_page_content {
width: 300px
}
.my_form_container {
width: 550px; 
margin-top:45px; 
margin-left:13px;
background: #cccccc;
}
.my_form_left {
width:105px; 
display: inline;
float:left;
background: yellow;
}
.my_form_left p {
font-family:arial; 
font-size:10px; 
margin-top: 6px; 
margin-bottom:20px; 
color:#000000 !important
}
.my_form_right{
display:inline;
float: left;
}
.my_form_right input {
width: 186px; 
height: 25px; 
border: 2px solid #e4e4e4; 
border-radius: 6px; 
margin-bottom:12px;
outline: none;
color: #999999;
padding-left:5px;
}
.my_form_button button {
float:right; 
background: none repeat scroll 0 0 #333333; 
border: 2px solid #a8a8a8; 
border-radius: 6px; 
width: 195px; 
cursor: pointer; 
font-size: 15px; 
color: #ffffff; 
padding-top: 3px; 
padding-bottom: 1px;
margin-top: 100px;
position: absolute;
}
/* selectize css here */
.field-row {
width:100%;
height:auto;
float:left;
margin-bottom:10px;
border:1px solid green;
padding:10px;
cursor: move;
}

Answer 1

For some reason, my implementation differed from the default at:

https://github.com/brianreavis/selectize.js/blob/master/dist/css/selectize.default.css#L126

and was:

.selectize-control {
    position: absolute;
}

Switching this to position:relative, solved the problem.