How to align bootstrap text-box and button in one line?

Question

I want to align textbox and button in one line. I am using bootstrap css. Below is the code i am using.

HTML :

<div class="new-meows">
        <input type="text" class="form-control" >
        <button type="button" class="btn">Submit</button>    
</div>

CSS:

.new-meows{
   padding: 10px;
   border: 1px solid grey;
   margin : 10px;
   width: 97%;
 }

Layout it makes :

enter image description here

I want the button just after the text box.

Answer 1

You need to give proper width to textbox and button. Lets say I want button to take width of 80px and rest to textbox. Then it could be like this.

.new-meows{
   padding: 10px;
   border: 1px solid grey;
   margin : 10px;
   width: 97%;
   display: flex;
   justify-content:space-between;

 }
 .new-meows button{
    width: 80px;
 }
.new-meows input{
    width: calc(100% - 80px)
 }

using flex space-between you can achieve this. You can use float also.