My HTML code includes elements from Twitter Bootstrap and AngularJS framework.
<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>
As this HTML is part of a partial template used across multiple pages, it cannot be rearranged.
The CSS styles I have applied are:
.item-custom-first select {
width: inherit !important;
}
.item-custom-second div {
display: inline-flex !important;
width: auto !important;
}
These styles help in displaying the elements like https://i.sstatic.net/4LxB9.jpg
However, I am looking to align the input field side by side with equal spacing between the input field and units dropdown as shown in this image: https://i.sstatic.net/Uoo4g.jpg
Can this alignment be achieved using CSS? Any additional information needed will be provided. Thank you in advance.
UPDATE... I would like the text input to occupy all available empty space if possible.