Margin right negative makes moves input to the right - html

Question

I have the following HTML to place a button inside an input (JSFiffle Example):
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
form {
border: 1px solid green;
max-width: 400px;
}
input {
border: 1px solid red;
background-color: white;
display: inline-block;
font-size: 18px;
line-height: 1;
margin: 0;
margin-right: -80px;
padding: 12px;
vertical-align: middle;
width: 100%;
}
button {
background-color: white;
border: none;
cursor: pointer;
display: inline-block;
font-size: 28px;
line-height: 1;
margin: 0;
outline: 0;
vertical-align: middle;
}
i {
display: block;
line-height: 1;
margin: 0;
padding: 0;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<form>
<input type="text">
<button><i class="fa fa-search"></i></button>
</form>
Problem
The JSFiddle Example I posted works great ...
But in my application when the negative margin right value is bigger then the icon width the input moves right and gets outside of the container with a space on the left:
I am not able to replicate this on JSFiddle but I wonder if someone has any idea what to look for because I have been trying everything and not able to solve it.

Answer 1

I'd suggest something more along these lines:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
form {
border: 1px solid green;
max-width: 400px;
}
.search-input {
display: flex;
flex-flow: row nowrap;
height: 40px;
border: 1px solid red;
background-color: white;
font-size: 18px;
line-height: 1;
}
.search-field {
flex: auto;
border: none;
padding: 10px;
}
.search-button {
width: 40px;
height: 40px;
font-size: 24px;
cursor: pointer;
border: none;
background: transparent;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<form>
<div class="search-input">
<input class="search-field" type="text">
<button class="search-button" type="submit"><i class="fa fa-search"></i></button>
</div>
</form>

Answer 2

Since you said you didn't want a flex solution, how about removing the negative margin-right and replacing width: 100% with width: 88%.
That being said and since I'm a big fan of flexbox, the following is a different flex solution from James' offering:
form {
border: 1px solid green;
max-width: 400px;
display: flex; /* Added */
justify-content: flex-end; /* Added */
}
input {
border: 1px solid red;
background-color: white;
display: inline-block;
font-size: 18px;
line-height: 1;
margin: 0;
/* margin-right: -80px; */ /* Removed */
padding: 12px;
vertical-align: middle;
/* width: 100% */ /* Removed */
flex: 0 1 100%; /* Added */
}

Answer 3

You can make the input's container position: relative and the button position: absolute. Then you can move the button wherever you want relative to the container. I would suggest using something other than the form element, so that you can have more than one element in the form. I've added a simple wrapping div.
Then you set right to a little more than 0 so that the border(s) can be seen, and the top to half way down, less half the height of the button so it's centered vertically.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
form {
border: 1px solid green;
max-width: 400px;
}
.search {
/* Making the container relative... */
position: relative;
}
input {
border: 1px solid red;
background-color: white;
display: inline-block;
font-size: 18px;
line-height: 1;
margin: 0;
padding: 12px;
vertical-align: middle;
width: 100%;
}
button {
background-color: white;
border: none;
cursor: pointer;
display: inline-block;
font-size: 28px;
line-height: 1;
margin: 0;
outline: 0;
vertical-align: middle;
/* means you can absolutely position the button relative to that */
position: absolute;
/* make it one pixel off the right for the border */
right: 1px;
/* make it 50% - half its height to center it vertically */
top: calc(50% - 14px);
}
i {
display: block;
line-height: 1;
margin: 0;
padding: 0;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<form>
<div class="search">
<input type="text">
<button><i class="fa fa-search"></i></button>
</div>
</form>