Responsive Design: how to have text input and button stay 100% width of parent

Question

Very simple question... I'm hacking it right now with floated percentages (but I know that there has to be a better solution) please see my photo as an example to go by. I want to have the parent stay 100% in width and the search box be an automatic width that always stays next to the search button, and I want the search button to be able to grow as wide as it wants to (depending on the text inside of it/padding).

Answer 1

UPDATE (The Flexbox Way!)

The proper way to achieve this now is with Flexbox!

CSS "Flexbox" Way (https://jsfiddle.net/1jxkyLdv/)

    /* CSS
    **************************************************************************/

    /* Reset */
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { margin: 1rem; }
    h2 { margin: 2rem 0 0; }


    /* Flexbox Example */
    .flexbox { display: flex; }
    .flexbox .stretch { flex: 1; }
    .flexbox .normal { flex: 0; margin: 0 0 0 1rem; }
    .flexbox div input { padding: .5em 1em; width: 100%; }
    .flexbox div button { padding: .5em 1em; white-space: nowrap; }



    <!-- HTML ------------------------------------------------------------------->

    <h1>Flexbox Way!</h1>

    <h2>Short Word</h2>
    <section class="flexbox">
            <div class="stretch">
                <input type="text" placeholder="Search..." />
            </div>
            <div class="normal">
                <button>Search</button>
            </div>
    </section>

    <h2>Long Word</h2>
    <section class="flexbox">
            <div class="stretch">
                <input type="text" placeholder="Search..." />
            </div>
            <div class="normal">
                <button>Super Long Word For Search Button With Flexbox!</button>
            </div>
    </section>

---

THE OLD WAY

I despise using tables or using css to make divs act like tables), But here's the other way.

CSS "Table-Cell" Way (http://jsfiddle.net/eUhTM/3/)

        * { box-sizing: border-box; }

        section { width: 100%; display: table; padding: 1em 0 0; }
        div { display: table-cell; width: 100%; }
        input { width: 100%; padding: .5em 1em; }
        button { color: black; padding: .5em 1em; white-space: nowrap; margin: 0 0 0 1em; }

        <h1>Short Word</h1>
        <section>
                <div>
                    <input type="text" placeholder="Search..." />
                </div>
                <div>
                    <button>Search</button>
                </div>
        </section>

SOLUTION
The main trick is to make the section a "display: table;" and the divs inside "display: table-cell;", you're input "width: 100%" and you're button "white-space: nowrap".

I'm still interested in solutions though!

Thank you everyone for your great answers.