Как выровнять текст, поле ввода, btn-group в одну горизонтальную линию
У меня есть текст, поле ввода и btn-группа, состоящая из двух групп, и я хочу, чтобы все они отображались в одной горизонтальной линии. Я использую класс блока как родительский и помещаю показы встроенного блока под ним, чтобы достигнуть того, что я описал выше. Но кнопки попадают в новую строку.
Мой HTML:
<div class='block'>
<div class='desc' style='display:inline-block; width:80px;'>
Reply 1:
</div>
<div style='display:inline-block; width:calc(90% - 80px);'>
<input type='text' class='form-control' placeholder='Answer Text'></input>
</div>
<div style='display:inline-block; width:10%; text-align:right;'>
<a class='btn defineBranching' href='#'>
<i class='fa fa-random'></i>
</a>
<a class='btn deleteAnswerField' href='#'>
<i class='fa fa-trash-o'></i>
</a>
</div>
</div>
Результат выглядит следующим образом:
Есть идеи, как это исправить?
ОБНОВЛЕНИЕ: Это было проблемой пробела. Когда вы закомментируете новые строки среди дочерних блоков класса, это решает проблему.