css - How to make search field responsive -

i'm attempting add search field responsive sidebar, , want field responsively scale width of sidebar, while keeping 'submit' button @ set width, on same line search field.

---

i've been able mock effect divs, when applying same styles form elements, search field fill full width of form element:

http://dabblet.com/gist/5618200

---

i aware can work percentages:

http://dabblet.com/gist/5618209

but 'submit' button have set width.

---

what can make form behave -exactly- div mockup in first example?

not getting question well, want text box width 100% , fixed button this?

demo

<input type="submit" value="search" /> <div>    <input type="text" /> </div>  input[type=submit] {     float: right; }  input[type=text] {     width: 100%; }  div {     overflow: hidden;      padding-right: .5em; }