title: Buttons end up inside eachother
body: <p>I have a toolbar with 3 buttons. and one of them has a dropdown.</p>
  
  <p>the html is the following: </p>
  
  <pre><code>    &lt;div id="primary-section" class="wrapper wrapper-content"&gt;
          &lt;div class="row" id="create-container"&gt;
              &lt;div class="col-lg-12"&gt;
                  &lt;div class="ibox float-e-margins animated fadeInRight"&gt;
                      &lt;div class="ibox-title" style="height: 60px;"&gt;
                          &lt;div class="btn-group"&gt;
                              &lt;button onclick="javascript:vm.createContainer()" class="btn btn-primary" id="newcontainer" style="margin-right:16px;"&gt;&lt;i class="fa fa-plus"&gt;&lt;/i&gt; New Container&lt;/button&gt;
                          &lt;/div&gt;
                          &lt;div class="btn-group"&gt;
                              &lt;button type="button" id="btn-connect" class="btn btn-success" disabled="disabled"&gt;Connect&lt;/button&gt;
                          &lt;/div&gt;
                          &lt;div class="btn-group" id="actions" style="margin-right:16px;"&gt;
                              &lt;button id="btn-actions" data-toggle="dropdown" class="btn btn-info dropdown-toggle" aria-expanded="false" disabled="disabled"&gt;Action &lt;span class="caret"&gt;&lt;/span&gt;&lt;/button&gt;
                              &lt;ul class="dropdown-menu"&gt;
                                  &lt;li&gt;&lt;a&gt;Start&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a&gt;Stop&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a&gt;Pause&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a&gt;Resume&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a&gt;Delete&lt;/a&gt;&lt;/li&gt;
                                  &lt;li class="divider"&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a id="inspect"&gt;Inspect&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a id="console"&gt;Console&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a&gt;Clone&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="ibox-content"&gt;
                          &lt;div id="loading-grid"&gt;
                              &lt;img src="/public/img/squares.gif" height="130" width="130" title="Loading" alt="Loading"/&gt;
  
                              &lt;h3&gt;Loading containers...&lt;/h3&gt;
                          &lt;/div&gt;
                          &lt;div id="grid" class="hidden"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Now for some reason the html that results out of this is the following.
  The create button ends up inside of the connect button. and i can't for the life of me figure out what the hell is going on. it looks like i closed all tags and quotes.</p>
  
  <p>parsed HTML:</p>
  
  <pre><code>&lt;div id="primary-section" class="wrapper wrapper-content"&gt;
      &lt;div class="row" id="create-container"&gt;
          &lt;div class="col-lg-12"&gt;
              &lt;div class="ibox float-e-margins animated fadeInRight"&gt;
                  &lt;div class="ibox-title" style="height: 60px;"&gt;
                      &lt;div class="btn-group"&gt;
  
                      &lt;/div&gt;
                      &lt;div class="btn-group"&gt;
                          &lt;button type="button" id="btn-connect" class="btn btn-success" disabled="disabled"&gt;&lt;button onclick="javascript:vm.createContainer()" class="btn btn-primary" id="newcontainer" style="margin-right:16px;"&gt;&lt;i class="fa fa-plus"&gt;&lt;/i&gt; New Container&lt;/button&gt;Connect&lt;/button&gt;
                      &lt;/div&gt;
                      &lt;div class="btn-group" id="actions" style="margin-right:16px;"&gt;
                          &lt;button id="btn-actions" data-toggle="dropdown" class="btn btn-info dropdown-toggle" aria-expanded="false" disabled="disabled"&gt;Action &lt;span class="caret"&gt;&lt;/span&gt;&lt;/button&gt;
                          &lt;ul class="dropdown-menu"&gt;
                              &lt;li&gt;&lt;a&gt;Start&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a&gt;Stop&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a&gt;Pause&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a&gt;Resume&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a&gt;Delete&lt;/a&gt;&lt;/li&gt;
                              &lt;li class="divider"&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a id="inspect"&gt;Inspect&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a id="console"&gt;Console&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a&gt;Clone&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="ibox-content"&gt;
                      &lt;div id="loading-grid"&gt;
                          &lt;img src="/public/img/squares.gif" height="130" width="130" title="Loading" alt="Loading"/&gt;
  
                          &lt;h3&gt;Loading containers...&lt;/h3&gt;
                      &lt;/div&gt;
                      &lt;div id="grid" class="hidden"&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>