how to make two elements to be in the same line - html css

Question

I have this code:

<div class="{{($type != 'forecast')?'col-md-8':'col-md-8'}}">
    <div class="form-group">
        <label>Name:</label>
        <input type="text" class="form-control" name="name" value="12" {{($viewOnly)?'disabled':''}} >
        <i class="fa fa-info-circle" title="test"></i>
    </div>                                 
</div>

this is the UI

I just want the <i> icon be next to the input field and not in the bottom.

How I can achieve that?

Answer 1

Wrap the input field and the icon within a div with the class input-group .

<div class="input-group">
   <input type="text" class="form-control" name="name" value="12" {{($viewOnly)?'disabled':''}}>
   <i class="fa fa-info-circle" title="test"></i>
</div>

Answer 2

this is the solution

<div class="form-group">
  <label>Name:</label>
  <div class="input-group" style="display: flex">
      <input type="text" class="form-control" name="name" value="12" {{($viewOnly)?'disabled':''}} >
     <i class="fa fa-info-circle" title="test"></i>
 </div>  
</div>