I have text, input box, and btn-group consisting of two groups and I want them all display in single horizontal line. I am using block class as parent and putting inline-block displays under it in order to achieve what I describe above. But buttons get into new line.
My 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>
The result looks like the folowing image:
Any idea how to fix this?
UPDATE: This was whitespace issue. When you comment out new lines among children of block class, it fixes the issue.