html - display inline doesnt work correctly -

i have code:

the image placed behind input element , not next (with small margins).

this how works now: inline doesnt work

i not every item 1 followed other without overlap

css

.mfc-number-step {   margin: 10px;   input {     width: 202;     height: 41px;   } }  .mfc-number-step__status--error {     border-color: red;     background: #fff3f2; }  .mfc-number-step__status--disabled {     color: #8b8b8b; }  .mfc-number-step__button {     width: 41px;     height: 41px; }  input, img {     display: inline; } 

html

<div class="mfc-number-step">   <input type="text" ng-class="{'mfc-number-step__status--error' : mfcnumberstepstatuserror === 'true' , '.mfc-number-step__status--disabled' : mfcnumberstepstatusdisabled === 'true'}" ng-disabled="mfcnumberstepstatusdisabled === 'true'" value="{{mfcnumberstepunitmeasure}}" class="mfc-number-step__input"/>   <img src="{{mfcnumberstepsubtracticon}}" class="mfc-number-step__button"/>   <img src="{{mfcnumberstepaddicon}}" class="mfc-number-step__button"/> </div> 

first @ should use ng-src instead of src attribute inside img tags if want load images curly brackets.

using angular markup {{hash}} in src attribute doesn't work right: browser fetch url literal text {{hash}} until angular replaces expression inside {{hash}}. ngsrc directive solves problem.

are using sass? because in normal css cant nest css classes did in .mfc-number-step.