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

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%;
}

Answer 4

Position the buttons to the right using float: right. Set the width of the textbox using width: calc(100% - x) where x is the width of the buttons:
input[type=text] {
width: calc(100% - 122px);
box-sizing: border-box;
}
If you don't know the width of the buttons, you can get it with JavaScript:
var buttons = document.querySelector(".buttons");
var input = document.querySelector("input[type=text]");
input.style.width = "calc(100% - " + buttons.offsetWidth + "px)";
.box {
width: 50%;
border: 1px solid black;
height: 300px;
padding-top: 30px;
}
.buttons {
float: right;
}
input[type=text] {
box-sizing: border-box;
}
<div class="box">
<input type="text"/>
<div class="buttons">
<button>button1</button>
<button>button2</button>
</div>
</div>