how to make two elements to be in the same line

I have this code:

<div >
    <div >
        <label>Name:</label>
        <input type="text"  name="name" value="12" {{($viewOnly)?'disabled':''}} >
        <i  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?

CodePudding user response：

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

<div >
   <input type="text"  name="name" value="12" {{($viewOnly)?'disabled':''}}>
   <i  title="test"></i>
</div>

CodePudding user response：

this is the solution

<div >
  <label>Name:</label>
  <div  style="display: flex">
      <input type="text"  name="name" value="12" {{($viewOnly)?'disabled':''}} >
     <i  title="test"></i>
 </div>  
</div>