How to align text, input box, btn-group in single horizontal line

44 Views Asked by At

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: enter image description here

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.

0

There are 0 best solutions below