Responsive full width input with button - html

Question

I have the fiddle here: https://jsfiddle.net/ufLpqdtj/
My problem is trying to get my search box and button to always sit full width on the page regardless of the device it is running on.
In Javascript I could always make the text box width 100% minus the pixel width of the button (the button is always the same size) but I feel as if im missing something and that it can be done natively in CSS.
Any thoughts or suggestions?
#commonSearchContainer {
display: block;
clear: both;
width: 100%;
position: relative;
}
#commonSearchTerm {
width: 100%;
margin: 25px 0px 0px 0px;
padding: 5px;
border: 1px solid #999999;
height: 35px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.common-search-term-wrapper {
width: 90%;
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.common-search-button {
background-color: #E9700D;
border: 1px solid #ccc;
display: inline-block;
margin: 25px 0px 0px 10px;
width: 80px;
color: #fff;
padding: 7px;
font-style: italic;
cursor: pointer;
}
<div id="searchSection" class="common-search-section">
<div class="common-search-term-wrapper">
<input id="commonSearchTerm" type="text" autocomplete="off" class="common-search-term">
</div>
<div id="commonSearchSubmit" class="common-search-button">
Search
<div style="clear: both;"></div>
</div>
</div>

Answer 1

What I typically do for that sort of layout is make a parent container around the elements (like you have) and give it position: relative and width: 100%.
Then I use position: absolute and display: inline-block on the inner elements. Set the width for the fixed-sized elements and use left or right to position all of the elements.
In your case, it would be something like this: https://jsfiddle.net/ufLpqdtj/1/

Answer 2

Well you shouldn't use the div as a button. There are html elements for that.
If correctly understood what you want to achieve...
form {
width: 100%;
display: inline-flex;
justify-content: center;
}
#commonSearchTerm {
width: 80%;
}
#searchButton {
width: 80px;
border-radius: 0;
background-color: red;
border: none;
padding: 2px;
color: white;
}
<form >
<input id="commonSearchTerm" type="text" autocomplete="off" class="common-search-term">
<input id="searchButton" type="submit">
</form>
This is using flexbox which is is more flexible when creating responsive stuff.