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 ><inputid="commonSearchTerm"type="text"autocomplete="off"class="common-search-term"><inputid="searchButton"type="submit"></form>

This is using flexbox which is is more flexible when creating responsive stuff.