How to make input field take up 100% of the unused space?

Question

I've been spinning my wheel on this little thing for hours now. I have a div. In that div, I want two buttons on the right-hand side (side-by-side) and the rest of that row filled in by an input field. I've tried countless combinations of CSS options and I can't figure it out.
I need item1 and item2 to be side-by-side and taking up the entire width of the parent div. Any ideas from the CSS gurus? Thanks!!

http://jsfiddle.net/vasxmg1d/

<div style="width: 50%; border: 1px solid black; height: 300px;">
    <br/>
    <div style="width: 100%">
        <input id="item1" type="text" style="width: 100%"/>
        <div id="item2">
            <button>button1</button>
            <button>button2</button>
        </div>
    </div>
</div>

Answer 1

Modern approach - flexbox

Use flexbox - set the wrapper <div> to display: flex and the <input> to flex: 1 (effectively flex-grow: 1):

#wrapper {
    display: flex;
}
#item1 {
    flex:1;
}

http://jsfiddle.net/vasxmg1d/10/

More info on flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Older approach - table layouts through CSS

If you prefer to use table layouts, at least do it through CSS instead of introducing table markup in your HTML (but you will need to add a wrapper element around your input to achieve it)

http://jsfiddle.net/vasxmg1d/12/

<div id="item1">
    <input type="text"/>
</div>

and the CSS

#wrapper {
    display: table;
}
#item1,#item2 {
    display: table-cell;
    white-space: nowrap;
}
#item1 {
    width: 100%;
}
#item1>input {
    width: 100%;
}

Answer 2

You cound using tables also

Follow this:

<div style="width: 50%; border: 1px solid black; height: 300px;">
    <br/>
    <table style="width: 100%">
        <tr>
        <td width="100%"><input type="text" style="width: 100%;box-sizing:border-box;"/></td>
        <td><button>button1</button><br><button>button2</button></td>
        </tr>
    </table>
</div>

Answer 3

Not to sure if I get your question. Nevertheless, I just played around with the percentages. Check out the JS.

http://jsfiddle.net/vasxmg1d/2/

<input id="item1" type="text" style="width: 65%"/>

I placed a perctange on your button so they can fit.

button{
    float:left;
    width:15%;
}