How to align both these elements in same line?

Question

I have a textarea and a submit button.

Before adding <form> element it looked like

Now, after surrounding those two elements with <form>, it changed to

<div class="input-group">
     <form>
       <input type="text" class="form-control" placeholder="Enter Message"/>
       <span class="input-group-btn" >   
         <button class="btn btn-info" type="submit">SEND</button>
       </span>
     </form>
</div>

How to get back the previous view with the <form> element included?

I am using angular-bootstrap-ui.

I have a custom.css file where I can override the default bootstrap CSS. I tried with ids for form and button, but didn't achieve the exact result. Any help please?

Answer 1

The input-group should be inside the form. Like so:

<form>
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Enter Message">
    <span class="input-group-btn">   
      <button class="btn btn-info" type="submit">SEND</button>
    </span>
  </div>
</form>