CSS stretch textbox to fill remaining space - html

Question

I have a div with a label and a textbox and I simply want the textbox to stretch out to fill the remaining space on the page. I know that the 100% width doesn’t include any padding or margin values so I’ve added that to textbox and div. I’ve searched many similar topics, but my textbox always drops to a new line below the label. What am I missing? I'm placing my css inline just for testing purposes.
<div style="padding-right:10px;">
<asp:Label ID="Label1" runat="server" Text="Label" style="float:left; width:150px; display:inline-block"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server" style="display:inline-block; width:100%; padding-right:0"></asp:TextBox>
</div>

Answer 1

You can use calc() + box-sizing: border-box; for known width label.
.container label,
.container input[type="text"] {
float: left;
}
.container label {
width: 150px;
}
.container input[type="text"] {
width: calc(100% - 150px);
box-sizing: border-box;
}
<div class="container">
<label>Label Example</label>
<input type="text">
</div>
Or, use flexbox, that makes it very easy also works for dynamic width.
.container {
display: flex;
align-items: flex-start;
}
.container input[type="text"] {
flex: 1; /*take all the available space*/
}
<div class="container">
<label>Label Example</label>
<input type="text">
</div>
If you need to support legacy browsers, try using CSS table. Note, to make it work I added a span tag around the input box.
.container {
display: table;
width: 100%;
}
.container label,
.container span {
display: table-cell;
}
.container label {
white-space: nowrap;
}
.container span {
width: 100%;
}
.container input[type="text"] {
width: 100%;
box-sizing: border-box;
}
<div class="container">
<label>Label Example</label>
<span><input type="text"></span>
</div>