How to expand input to take remaining room in a div - html

Question

I would like to create a dropdown that drops down a custom panel (div) instead of a list of options. That panel is irrelevant because it is not tied to the layout I am asking about. For the basic drop-down look I have the following:
<style>
.folder-selection {
width: 100%;
}
.dropdown-button {
float: right;
}
</style>
<div id=container>
<input type="text" class="folder-selection" />
<button type="button" class="dropdown-button">...</button>
</div>
Now I know the float and width 100% are not right, but I have a container div, with an input on the left and a button on the right. The button must remain fixed to the right of the input. If the container is narrow, the input must be narrow, and vice versa, but I want to achieve this without knowing at design time the width of the container.
The container should fit into any width and the input's width should adjust accordingly. Just like a normal select element, where the text portion always fills all the space not taken by the dropdown icon/button at its right.

Answer 1

Below example will help you. Let me know, if you don't want fixed width icon in right so I'll update this code accordingly.
#container {
position: relative;
border: 1px solid #ccc;
padding: 5px 40px 5px 5px;
margin: 0 0 10px;
}
.folder-selection {
width: 100%;
padding: 5px;
border: none;
box-sizing: border-box;
height: 30px;
}
.dropdown-button {
position: absolute;
top: 5px;
right: 5px;
height: 30px;
}
<div id=container>
<input type="text" class="folder-selection" />
<button type="button" class="dropdown-button">...</button>
</div>

Answer 2

<style>
.dropdown-button {
width: 16px; /*Set width of button*/
}
.folder-selection {
width: calc(100% - 16px); /*div's width minus button's width*/
}
</style>
<div id=container>
<input type="text" class="folder-selection" /><!-- this comment is to remove white space between the two elements
--><button type="button" class="dropdown-button">...</button>
</div>
You don't really have to set the width of the button as long as you know its width on runtime.

Answer 3

This code will help you to position your elements as you expected.
* {
box-sizing: border-box;
}
.dropdown-container {
width: 500px;
display: table;
background: orange;
}
.dropdown-container .input-container {
display: table-cell;
}
.dropdown-container .input-container input {
width: 100%;
padding-right: 10px;
}
.dropdown-container .button-container {
display: table-cell;
width: 150px;
}
.dropdown-container .button-container button {
width: 100%;
}
<div class="dropdown-container">
<div class="input-container">
<input type="text" class="folder-selection" />
</div>
<div class="button-container">
<button type="button" class="dropdown-button">Drop</button>
</div>
</div>