Responsive Full Width Input With Button

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 runn

Solution 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/

Solution 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.