Submit button not aligning with input-CodePudding

I'm making a search bar with a submit button. Whenever I link the input box via a class to my css document, it misaligns the box and button.

Here's what I mean: What I Have

When I remove the class, it re-aligns the box and button but removes my formatting.

This is what I need, but with formatting:

What I need

This is my HTML:

<div >
<input type="text" placeholder="Search.." name="search" >
<button type="submit"><i ></i></button>
</div>

This is my CSS:

.search {
    padding: 7.5px;
    font-size: 15px;
    border-radius: 4px;
    border: none;
    margin-top: 7px;
    margin-right: 200px;
    float: right;
}

It should align the search box to the right of the border as well, like this:

Formatting

How do I fix this?

Apologies if I've not explained it very well, so let me know if you need clarification.

Thanks!

CodePudding user response：

you should put a id in the button and then recadre it in the css.

CodePudding user response：

Use flexbox:

.search {
  display: flex;
  padding: 7.5px;
  font-size: 15px;
  border-radius: 4px;
  border: none;
  margin-top: 7px;
  margin-right: 200px;
  float: right;
  justify-content: space-between;
}
.fa-search {
  width: 40px; //or fit-content or some other sizes
}

for direction of your elements you can do many things but you should read this link about flexbox and its details. Or this.