title: Display two div's side by side inside <li></li> element
body: <p>How can I get the two div's inside the list element (part of an ordered list) to display side by side? </p>
  
  <p>The div's in question are with <code>class="dd-handle"</code>and <code>class="btn-group"</code>. </p>
  
  <p>I'm using Bootstrap v3.3.4 and Nestable2.js</p>
  
  <p>I've tried the following. In this case, the btn-group displays below the first div. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;li class="dd-item" data-id="id"&gt;
                  &lt;div class="dd-handle"&gt;Section name&lt;/div&gt;
                  &lt;div class="btn-group"&gt;
                      &lt;a data-toggle="dropdown" class="dropdown-toggle" role="button"&gt;
                          &lt;span class="icon icon-dots-three-horizontal"&gt;&lt;/span&gt;
                      &lt;/a&gt;
                      &lt;ul class="dropdown-menu"&gt;
                          &lt;li&gt;
                              &lt;a href="#myModal" id="myModel" data-toggle="modal" data-reportId="id" data-reportName="name"&gt;
                                  &lt;span&gt;&lt;/span&gt;
                                  Rename
                              &lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="#myOtherModal" data-toggle="modal"&gt;
                                  &lt;span&gt;&lt;/span&gt;
                                  Add New
                              &lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
     &lt;/li&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>In this case, the layout and functionality of the Nestable2.js library are completely off. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;li class="dd-item" style="display:flex; flex-direction:row; justify-content: space-around;" data-id="id"&gt;
                      &lt;div class="dd-handle" style="display:flex; flex-direction:column;"&gt;Section name&lt;/div&gt;
                      &lt;div class="btn-group" style="display:flex; flex-direction:column;"&gt;
                          &lt;a data-toggle="dropdown" class="dropdown-toggle" role="button"&gt;
                              &lt;span class="icon icon-dots-three-horizontal"&gt;&lt;/span&gt;
                          &lt;/a&gt;
                          &lt;ul class="dropdown-menu"&gt;
                              &lt;li&gt;
                                  &lt;a href="#myModal" id="myModel" data-toggle="modal" data-reportId="id" data-reportName="name"&gt;
                                      &lt;span&gt;&lt;/span&gt;
                                      Rename
                                  &lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;
                                  &lt;a href="#myOtherModal" data-toggle="modal"&gt;
                                      &lt;span&gt;&lt;/span&gt;
                                      Add New
                                  &lt;/a&gt;
                              &lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
         &lt;/li&gt;</code></pre>
  </div>
  </div>
  </p>