Q:

Bootstrap button moves to right side when page is too wide

How can I have the request button always hug the left side, when the page is too wide it moves to the right.
https://jsfiddle.net/DTcHh/34953/
<div class="request-section" hidden="" style="display: block;">
    <div class="panel-body">
        <label>Arguments</label>
        <div class="form-group form-inline">
            <div class="form-group">
                <input type="text" class="form-control arg-form" placeholder="source" data-arg="source">
            </div>
        </div>
        <label>Body</label>
        <div class="form-group">
            <div class="col-sm-11" style="padding-left: 0px;">
                <pre class="body-pre" contenteditable="true"></pre>
            </div>
            <div class="dropdown col-sm-1">
                <button class="btn btn-default dropdown-toggle body-content-type-btn" type="button" data-toggle="dropdown" data-content-type="application/json">application/json <span class="caret"></span></button>
                <ul class="dropdown-menu">
                    <li><a>application/json</a></li>
                    <li><a>text/plain</a></li>

                </ul>
            </div>
        </div>
        <a class="btn btn-default">Request</a>
    </div>
    <div class="panel-footer">
        <pre style="max-height: 750px; background-color: snow">No content</pre>
    </div>
</div>

A:

You're using .form-group incorrectly and might consider refreshing your understanding of Bootstrap's Form Syntax ( http://getbootstrap.com/css/#forms ).  Below is a re-tooling of your code to achieve a similar layout.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel panel-default">
 <div class="panel-heading">
  Your Panel Heading
 </div>
 
 <div class="panel-body">
  <label class="control-label">Arguments</label>
  <div class="form-inline">
   <div class="form-group">
    <input type="text" class="form-control arg-form" placeholder="source" data-arg="source">
   </div>
  </div>
  
  <br />
  
  <label class="control-label">Body</label>
  <div class="input-group">
   <pre class="form-control body-pre" contenteditable="true"></pre>
   <div class="input-group-btn">
    <button class="btn btn-default dropdown-toggle body-content-type-btn" type="button" data-toggle="dropdown" data-content-type="application/json">application/json <span class="caret"></span></button>
    <ul class="dropdown-menu dropdown-left">
    <li><a>application/json</a></li>
    <li><a>text/plain</a></li>
    </ul>
   </div>
  </div>
 
  <br />
  
  <a class="btn btn-default">Request</a>
 </div>

 <div class="panel-footer">
  <pre style="max-height: 750px; background-color: snow">No content</pre>
 </div>
</div>

In the above code I've replaced most of your use of .form-group as well as moved your dropdown button into an .input-group so it can be considered part of the adjacent element (in this case your <pre> tag).

