CSS problem, auto correct width

I've got the following code.. http://jsfiddle.net/L593G/7/ what would I need to add to make the query box auto resize depending on the menu? So as to prevent the text (when it's long) disappearing under the menu? To see what I mean type a long sentence into the query box and it'll vanish behind the menu. I'd prefer if it just cut of开发者_如何学编程f the text on the far left rather than the "new" additions getting hidden.

Here's a very quick mock-up of what I think you're trying to accomplish. Instead of actually placing the select inside the textbox, you can place both objects in a div, "hide" the textbox, and make the div look like a textbox.

Hope that makes sense.

http://jsfiddle.net/2jtsm/

What I did was:

1. Instead of absolute positioning on menu, float it to the right
2. Place the input box inside another div, set margin-right of div to 100px
3. Gave a fixed width to menu select box

Update:

If you can have a fixed width on the box, here's a quick CSS trick:

http://jsfiddle.net/abnZ3/

You can do this with tables:

<table style="width: 100%">
    <tr>
        <td style="width: 100%"> 
            <input type="text" style="width: 100%"/>
        </td>
        <td>
            <select>
               <option value=1>a value</option>
               <option value=2>another value</option>
               <option value=3>and this is the final value</option>
            </select>
        </td>
    </tr>            
</table>