Make an input take up all the remaining space

Question

My problem is similar to this question, but different.

I have a table cell of an unknown width. This cell contains an input and a span. The span should be as wide as its contents needs and the input should take all the remaining space.

I've created a trivial plunk for this seemingly trivial question. The random text should be on the very right and the input should grow or shrink as needed to fill the yellow td.

Answer 1

Try splitting the yellow <td> into its own table (or other elements using display: table-cell, etc).

Set the width of the cell containing the input to 100%, and set the max-width of the table to 100%.

That will cause the table inside the cell to re-flow when the text changes.

Basic demo: http://plnkr.co/edit/ao4at9RHg8VgRrgtmTqu?p=preview

Answer 2

This can be achieved with Flexbox.

HTML:

<td class="foo">
    <input class="foo__input">
    <span>dsflkwej</span>                
</td>

CSS:

.foo {
    display: flex
}
.foo__input {
    flex-grow: 1
}

Live demo: http://jsfiddle.net/simevidas/MhR77/

(Use Autoprefixer to add vendor prefixes for Flexbox properties.)