keep button in div positioned along with parent div - css

Question

I have the following:
https://codepen.io/anon/pen/KXYLrq
<header>
<input type="text" id="textfield" placeholder="Get it done!" autofocus>
<button id="add"><i class="fa fa-plus" aria-hidden="true"></i></button>
</header>
with css that is too long to list. I'd like to focus on the #media query. Due to larger screen sizes i need to limit the width of the input bar. If i set a max-width, or fixed width the button will move along with the screen size and continually move to the right.
How do i fix the button in one position past a certain screen size ? (In codepen, if you take out the media query it works just fine, presumably because i set the width to 100%)

Answer 1

Add this also in media query
header button{
right: auto;
left: 695px
}
It will help you to align the button with the text box.

Answer 2

I placed a Container over your input and button, assuming you'll have other elements in the header later.
I then set the section as display: inline-block to make it take the width of the content and also made it position: relative for the child absolute elements. So that those elements will take the section as a starting point and not the header.
https://codepen.io/anon/pen/jGRooL

Answer 3

Just wrap input and button in one parent div and set position relative in it and add width in it.
header {
background: #25b99a;
border-radius: 0 0 10px 10px;
box-shadow: 0px 2px 4px rgba(44, 62, 80, 0.15);
box-sizing: border-box;
height: 80px;
padding: 15px 25px 0 25px;
position: fixed;
top: 0;
width: 100%;
z-index: 5;
}
header input {
background: rgba(255, 255, 245, 0.2);
border-radius: 5px 25px 25px 5px;
border: 0;
box-sizing: border-box;
color: rgba(255, 255, 255, 1);
float: left;
font-size: 15px;
height: 50px;
padding-right: 65px;
outline: none;
text-indent: 15px;
width: 100%;
}
.search-box {
position: relative;
width:100%;
max-width: 700px;
}
.search-box button {
background-color: white;
border-radius: 25px;
border: 0;
cursor: pointer;
height: 50px;
outline: none;
position: absolute;
right: 0;
width: 50px;
z-index: 2;
}
#media screen and (max-width: 767px) {
.search-box {
max-width: none;
}
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<header>
<div class="search-box">
<input type="text" id="textfield" placeholder="Get it done!" autofocus>
<button id="add"><i class="fa fa-plus" aria-hidden="true"></i></button>
</div>
</header>
Updated Codepen Demo