Выровнять 2 выпадающих меню по горизонтали

Question

У меня проблема, когда мне нужно выровнять несколько dropdowns по горизонтали. Я пробовал с чистыми табличными тегами, и это работает, но я подозреваю, что это плохая практика. Вот рабочая скрипку http://jsfiddle.net/1440c8a6/5/

Вот HTML код:

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-12 col-sm-12 col-md-12"> 

      <div class="pull-left"> 

       <div class="dropdown"> 
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
         Dropdown 
         <span class="caret"></span> 
        </button> 
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
         <li><a href="#">Action</a></li> 
         <li><a href="#">Another action</a></li> 
         <li><a href="#">Something else here</a></li> 
         <li><a href="#">Separated link</a></li> 
        </ul> 
       </div> 

       <div class="dropdown"> 
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
         Dropdown 
         <span class="caret"></span> 
        </button> 
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
         <li><a href="#">Action</a></li> 
         <li><a href="#">Another action</a></li> 
         <li><a href="#">Something else here</a></li> 
         <li><a href="#">Separated link</a></li> 
        </ul> 

       </div> 
      </div> 

      <div class="pull-right"> 
       <a class="btn btn-warning btn-sm" href="#" role="button">button1</a> 
       <a class="btn btn-success btn-sm" href="#" role="button">button2</a> 
      </div> 

      <br /> 
      <br /> 
     </div> 
    </div> 
</div> 

Как вы можете видеть, что я пытаюсь выровнять выпадающие в левой части в виде кнопок в правой части:

Я пробовал эту структуру, но не уверен, что это хорошо или плохо:

<table> 
    <tr> 
    <td>first div here</td> 
    <td>second div here</td> 
    <tr> 
</table> 

Answer 1

Установите display:inline-block в .dropdown

CSS

.dropdown{ 
    display: inline-block; 
} 

DEMO HERE