Wie kann das Element die verbleibende Breite ausfüllen, wenn das Geschwisterelement eine variable Breite hat?

Im folgenden Beispiel:

Ich möchte, dass das Textfeld den gesamten verfügbaren Platz ausfüllt. Das Problem ist, dass die Dropdown-Breite nicht behoben werden kann, da die Elemente nicht statisch sind. Ich würde das gerne mit nur CSS lösen (kein Javascript wenn möglich).

Ich habe die vorgeschlagenen Lösungen für ähnliche Fragen ohne Glück ausprobiert :(

Hier ist die Geige:http://jsfiddle.net/ruben_diaz/cAHb8/

Hier ist der HTML-Code:

<div id="form_wrapper">
    <form accept-charset="UTF-8" action="/some_action" method="post">
        <span class="category_dropdown_container">
            <select class="chosen chzn-done" name="question[category_id]" id="selQJK">
                <option value="1">General</option>
                <option value="2">Fruits</option>
                <option value="3">Ice Creams</option>
                <option value="4">Candy</option>
            </select>
        </span>
        <span class="resizable_text_box">
            <input id="question_text_box" name="question[what]" placeholder="Write a query..." type="text" />
        </span>
        <input name="commit" type="submit" value="Ask!" />
    </form>
</div>

Und hier das CSS:

#form_wrapper {
    border: 1px solid blue;
    width: 600px;
    padding: 5px;
}
form {
    display: inline-block;
    width: 100%;
}
.category_dropdown_container {
}
.resizable_text_box {
    border: 1px solid red;
}
input[type="text"] {
}
input[type="submit"] {
    background-color: lightblue;
    width: 80px;
    float: right;
}

Antworten auf die Frage(3)

Ihre Antwort auf die Frage