Выровнять divs бок о бок без пробелов

Question

У меня есть HTML. Я использую Twitter Bootstrap и AngularJS.

<div class="item item-custom-first"> 
    <select class="form-control"style="display:inline; float:right" ng-model="requestdata.units.length" ng-options="value.id as value.label group by value.group for value in lengthUnits" ng-change="validateLength()"> 
     <option value="" selected hidden /> 
    </select> 
</div> 
<div class="item item-input item-stacked-label item-custom-second"> 
    <span class="positive" ng-bind-html="translatedData.lengthField"></span> 
    <div class="number number" > 
    <input class="form-control" type="number" name="length" placeholder="Value" 
      ng-model="requestdata.beltSystem.length" 
      ng-required="true" ng-blur="validateLength()"> 
     </div> 
</div> 

Поскольку HTML является частью частичного использования большого количества разных страниц, я не могу их переупорядочить.

У меня есть следующий css.

.item-custom-first select{ 
    width: inherit !important; 
} 
.item-custom-second div{ 
    display: inline-flex !important; 
    width: auto !important; 
} 

С этим я в состоянии отобразить эти элементы, как

Однако мне нужно поле ввода, чтобы привести в соответствие бок о бок с одинаковым зазором между полем ввода и единиц раскрывающихся следующим образом.

В любом случае, я могу сделать это с помощью CSS? При необходимости я буду предоставлять дополнительную информацию. Заранее спасибо.

UPDATE ... Я хочу, чтобы этот ввод текста заполнил все пустое пространство, если это возможно.

Answer 1

Добавить font-size: 0px; в родительский.

#example { 
 
    width: auto; 
 
    background: red; 
 
} 
 
#example:first-child { 
 
    font-size: 0px; /* Add to 'connect' divs (as seen in the first example)! */ 
 
} 
 

 
#example div { 
 
    display: inline-block; 
 
    background: yellow; 
 
    font-size: 14px; 
 
}

<div id="example"> 
 
    <div>Input div</div> 
 
    <div>Drop down div</div> 
 
</div> 
 

 
<div id="example"> 
 
    <div>Input div</div> 
 
    <div>Drop down div</div> 
 
</div>

Answer 2

Вы можете добавить pull-right как этот <div class="item item-input item-stacked-label item-custom-second pull-right"> затем добавить margin-right, чтобы отделить их всех одинаково.

см. Скрипка: https://jsfiddle.net/smh6bsrq/1/