Fix form to the bottom centered with flexible width and fixed button

Question

How can I fix the form like in this jsfiddle to the bottom of the page while retaining the flexible width of the input field and keeping it centered?

I've tried messing around with the code for a number of hours now... I keep on going hoping that I will find a solution.

______________________________________________
|                                            |
|                                            |
|         [blank page until filled]          |
|                                            |
|                                            |
|    [flexible input field][fixed button]    |
‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾

http://jsfiddle.net/nWCT8/1/

css

#searchbar {
position: fixed;
top: 20px;
left: 0;
width: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
}

.input-wrapper {
position: absolute;
right: 110px;
left: 0px;
top : 0px;
bottom: 0px;
}

/* Form wrapper styling */
.form-wrapper {
position: relative;
left: 0px;
top: 0px;
width: 50%;
height: 37px;
display: inline-block;
}

.form-wrapper input {
height: 100%;
width: 100%;
padding: 8px 10px;
float: left;   
color: #1f1f9d;
border: 0;
background: #e6e6e6;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
}

/* Form submit button */
.form-wrapper button {
position: absolute;
right: 0px;
top: 0px;
overflow: visible;


border: 0;
padding: 0;
cursor: pointer;
height: 37px;
width: 104px;
color: #ffffff;
background: red;
}  


.form-wrapper button::-moz-focus-inner { /* remove extra button spacing Mozilla Firefox */
border: 0;
padding: 0;
}    

html

    <div id="searchbar">
        <form class="form-wrapper">
            <div class="input-wrapper">
                <input type="text" placeholder="Input text here"/>
            </div>
            <button type="submit">Search</button>
        </form>
    </div>

Answer 1

Change the position of #searchbar to have an offset from the bottom instead of top

#searchbar {
    bottom: 20px;
    ...
}

#searchbar {
  position: fixed;
  bottom: 20px;
  left: 0;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.input-wrapper {
  position: absolute;
  right: 110px;
  left: 0px;
  top: 0px;
  bottom: 0px;
}
/* Form wrapper styling */

.form-wrapper {
  position: relative;
  left: 0px;
  top: 0px;
  width: 50%;
  height: 37px;
  display: inline-block;
}
.form-wrapper input {
  height: 100%;
  width: 100%;
  padding: 8px 10px;
  float: left;
  color: #1f1f9d;
  border: 0;
  background: #e6e6e6;
  -webkit-box-sizing: border-box;
  /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;
  /* Firefox, other Gecko */
  box-sizing: border-box;
  /* Opera/IE 8+ */
}
/* Form submit button */

.form-wrapper button {
  position: absolute;
  right: 0px;
  top: 0px;
  overflow: visible;
  border: 0;
  padding: 0;
  cursor: pointer;
  height: 37px;
  width: 104px;
  color: #ffffff;
  background: red;
}
.form-wrapper button::-moz-focus-inner {
  /* remove extra button spacing for Mozilla Firefox */
  border: 0;
  padding: 0;
}

<div id="searchbar">
  <form class="form-wrapper">
    <div class="input-wrapper">
      <input type="text" placeholder="Input text here" />
    </div>
    <button type="submit">Search</button>
  </form>
</div>

jsfiddle: http://jsfiddle.net/azizn/fmg7dzyp/

Answer 2

Like this:

http://jsfiddle.net/tobyl/L2jeepx0/1/

CSS added:

#searchbar {
    position: fixed;
    bottom: 20px;
    left: 0;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}