Display two div's side by side inside <li></li> element

Question

How can I get the two div's inside the list element (part of an ordered list) to display side by side?

The div's in question are with class="dd-handle"and class="btn-group".

I'm using Bootstrap v3.3.4 and Nestable2.js

I've tried the following. In this case, the btn-group displays below the first div.

<li class="dd-item" data-id="id">
                <div class="dd-handle">Section name</div>
                <div class="btn-group">
                    <a data-toggle="dropdown" class="dropdown-toggle" role="button">
                        <span class="icon icon-dots-three-horizontal"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="#myModal" id="myModel" data-toggle="modal" data-reportId="id" data-reportName="name">
                                <span></span>
                                Rename
                            </a>
                        </li>
                        <li>
                            <a href="#myOtherModal" data-toggle="modal">
                                <span></span>
                                Add New
                            </a>
                        </li>
                    </ul>
                </div>
   </li>

In this case, the layout and functionality of the Nestable2.js library are completely off.

<li class="dd-item" style="display:flex; flex-direction:row; justify-content: space-around;" data-id="id">
                    <div class="dd-handle" style="display:flex; flex-direction:column;">Section name</div>
                    <div class="btn-group" style="display:flex; flex-direction:column;">
                        <a data-toggle="dropdown" class="dropdown-toggle" role="button">
                            <span class="icon icon-dots-three-horizontal"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="#myModal" id="myModel" data-toggle="modal" data-reportId="id" data-reportName="name">
                                    <span></span>
                                    Rename
                                </a>
                            </li>
                            <li>
                                <a href="#myOtherModal" data-toggle="modal">
                                    <span></span>
                                    Add New
                                </a>
                            </li>
                        </ul>
                    </div>
       </li>

Answer 1

Try adding style="display: inline" or display: inline-block;, as blocks have a linebreak built into them by default, and this removes that break.