CSS issue- inline-block is not working - css

Question

I am trying to place two elements side by side. I used css inline block but surprisingly its not working.
<div class="item-body" style="display:inline-block">
<!--- Element 1--->
<div style="width:150px;" class="input-group">
<div class="spinner-buttons input-group-btn">
<button ng-click="selectedItem.qnt=selectedItem.qnt===1?1:selectedItem.qnt-1;updateSelectedItemData();" class="btn spinner-down red" type="button">
<i class="fa fa-minus"></i>
</button>
</div>
<input type="text" style="text-align: center;" ng-model="selectedItem.qnt" maxlength="3" class="spinner-input form-control ng-pristine ng-untouched ng-valid ng-valid-maxlength">
<div class="spinner-buttons input-group-btn">
<button ng-click="selectedItem.qnt=selectedItem.qnt+1;updateSelectedItemData()" class="btn spinner-up green-haze" type="button">
<i class="fa fa-plus"></i>
</button>
</div>
</div>
<!--- Element 2--->
<div > x {{i.item_qnt}}={{item_subtotal}}</div>
</div>
Element 1 and element 2 is appearing in different line

Answer 1

You need to apply display: inline-block; to each element that you want to be displayed in the same line, not to their parent container. I've added background-color so it's clearly visible where each <div> is exactly located. For both inline-blocks to be aligned vertically, use css property vertical-align.
.item-body > div {
vertical-align: text-top;
}
<div class="item-body">
<!--- Element 1--->
<div style="display: inline-block; width:150px; background-color: #f8f8f8;">
<div>
<button>-</button>
</div>
<input type="text" style="text-align: center;">
<div>
<button>+</button>
</div>
</div>
<!--- Element 2--->
<div style="display:inline-block; background-color: #ddd;"> x {{i.item_qnt}}={{item_subtotal}}</div>
</div>