Bootstrap inline form (input + button) breaks line
<p>I've been using Bootstrap for a while. I wouldn't say I'm an <em>expert</em> but I'm proficient. Nevertheless, this form-inline issue got me head over heels:</p>

<p>It's a very simple thing what I'm trying, yet here I am, unable to put two elements in line:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/&gt;

&lt;div class="container"&gt;
&lt;div class="row"&gt;
&lt;div class="col-xs-6"&gt;
  &lt;form class="form-inline"&gt;
    &lt;div class="form-group"&gt;
      &lt;label for="modal_add_group_input"&gt;&lt;/label&gt;
      &lt;input class="form-control" id="modal_add_group_input" placeholder="Nombre de grupo" type="text"&gt;
    &lt;/div&gt;
    &lt;button type="submit" class="btn btn-success"&gt;
        &lt;span style="color: white;" class="glyphicon glyphicon-plus-sign"&gt;      
        &lt;/span&gt; Crear Grupo&lt;/button&gt;
    &lt;/form&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>Not trying anything fancy here. I went back to basics and even the provided example doesn't work:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/&gt;
&lt;form class="form-inline"&gt;
  &lt;div class="form-group"&gt;
    &lt;label class="sr-only" for="exampleInputAmount"&gt;Amount (in dollars)&lt;/label&gt;
    &lt;div class="input-group"&gt;
      &lt;div class="input-group-addon"&gt;$&lt;/div&gt;
      &lt;input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount"&gt;
      &lt;div class="input-group-addon"&gt;.00&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;button type="submit" class="btn btn-primary"&gt;Transfer cash&lt;/button&gt;
&lt;/form&gt;</code></pre>
</div>
</div>
</p>

<p>...any suggestions? What am I doing wrong? Ç_Ç</p>

<p>PS: Not a duplicate of <a href="https://stackoverflow.com/questions/23208855/bootstrap-inline-forms-submit-button-not-in-the-same-line">Bootstrap inline form&#39;s submit button not in the same line</a> . Tried that. Didn't work.</p>