html - How to place some fields horizontal while others vertical inside a bootstrap form -

i have bootstrap form want fields horizontal while others vertical. in fiddle @ bottom, want field 1 , field 2 in same row , of default size (not stretched). button should @ center in separate row. how should achieve in bootstrap? tried adjusting size of text fields didn't work. also, button not placing @ center , close above form fields. table idea here? please me this.

fiddle: http://jsfiddle.net/r30kk8m4/

html

<div class="container-fluid">     <form class="form" role="form">                 <div class="form-group">             <div class="row">                 <div class="col-sm-6 col-md-6 col-xs-6">                     <input type="text" class="form-control" placeholder="field 1" />                 </div>                 <div class="col-sm-6 col-md-6 col-xs-6">                     <input type="text" class="form-control" placeholder="field 2" />                 </div>             </div>         </div>                 <div class="form-group text-center">             <div class="row">                 <input type="button" class="btn btn-primary" id="continueproductdetailsbutton" value="continue" />             </div>         </div>     </form> </div> 

working fiddle http://jsfiddle.net/r30kk8m4/1/

update can make buttons responsive

@media (max-width: 768px) {   .btn-responsive {     padding:2px 4px;     font-size:80%;     line-height: 1;     border-radius:3px;   } }  @media (min-width: 769px) , (max-width: 992px) {   .btn-responsive {     padding:4px 9px;     font-size:90%;     line-height: 1.2;   } }