Upload file in one line - html

Question

I working with css, trying to do a custom upload file.. I want something like this:
but for some reason my layout separate in 3 lines when I put into bootstrap modal, like this:
what am I doing wrong? why I can´t show it in just one line?
HTML:
<button class="btn btn-primary btn btn-xs" id="openUpload" style="background-color:#3399FF;color:#FFFFFF">
<span class="glyphicon glyphicon-chevron-up"></span>Importar</button>
<div class="modal" id="uploadModal" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static" style="overflow: hidden">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Add new File</h4>
</div>
<div class="modal-body col-md-12" id="modal-body">
<div id="upload">
<div class="col-md-12">
<div id="drop">
<span class="input-group-addon"><i class="glyphicon glyphicon-picture"></i></span>
<input type="text" class="form-control input-sx" disabled placeholder="Upload Image">
<span class="input-group-btn">
<button class="browse btn btn-primary input-sx" type="button"><i class="glyphicon glyphicon-search"></i> Browse</button>
</span>
</div>
</div>
<div class="fileupload-buttonbar">
<div>
<button type="submit" class="btn btn-success start">
<i class="glyphicon glyphicon-upload"></i><span>Start upload</span>
</button>
<button type="reset" class="btn btn-warning cancel">
<i class="glyphicon glyphicon-upload"></i><span>Clear upload</span>
</button>
<button type="reset" class="btn btn-danger cancel">
<i class="glyphicon glyphicon-ban-circle"></i><span>Cancel All</span>
</button>
</div>
</div>
<ol class="files upload-files-list"></ol>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Fiddle Demo
I search Bootstrap documentation but I get similar result, I try with given code but I get same result:

Answer 1

Just wrap your icon, input, button into input-group class.
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-picture"></i></span>
<input type="text" class="form-control input-sx" disabled placeholder="Upload Image">
<span class="input-group-btn"><button class="browse btn btn-primary input-sx" type="button"><i class="glyphicon glyphicon-search"></i> Browse</button></span>
</div>
Also you have used col-md-12 wrongly, use row class before it.
Updated Fiddle

Answer 2

This seems to work :
<div id="drop" class="input-group">
<span class="input-group-addon input-group-prepend"><i class="glyphicon glyphicon-picture"></i></span>
<input type="text" class="form-control input-sx" disabled placeholder="Upload Image">
<span class="input-group-btn input-group-append">
<button class="browse btn btn-primary input-sx" type="button"><i class="glyphicon glyphicon-search"></i> Browse</button>
</span>
</div>
Demo
Note the classes input-group, input-group-append and input-group-prepend