Two column layout with left fluid and right fill the rest width

Question

I need something similar to this and this. However I want the right column not to be fixed size, but variable size. Is it possible?

–––––––––––––––––––––––––––––––––––––––––––––––––––––––
|some text|stretch to fill the remaining space        | <- viewport
–––––––––––––––––––––––––––––––––––––––––––––––––––––––

Answer 1

This is the float solution. You can set a fixed width to .one column, or leave as it is to let the content to decide. And set overflow: auto; or overflow: hidden; to .two column.

.one {
    float: left;
    background: aqua;
}
.two {
    overflow: auto;
    background: yellow;
}

<div class="one">hello</div>
<div class="two">world</div>

The flexbox solution. The key is to set flex: 1; aka flex-grow: 1; to the dynamic width column. Follow this to see the browser support tables.

body {
    display: flex;
}
.one {
    background: aqua;
}
.two {
    flex: 1;
    background: yellow;
}

<div class="one">hello</div>
<div class="two">world</div>

Answer 2

Maybe missing something but couldn't this be used for each item?

<div>
<span>left text<span/><span>right text<span/>
</div>

Answer 3

http://jsfiddle.net/A8zLY/2333/ Fiddle from link I posted. right does not need fixed width. See link above

width:auto

Is this what you're looking for?

Answer 4

If a two-column-ish button is what you are after... (your ascii screenshot looks like this), so: diving the space in the best way but with one side winning, if it gets tight ➝ no truncated price, but truncated label if it has to be... ➪ full source on codepen

<div class="container">
    <div class="two">125&thinsp;€</div>
    <div class="one">my favorite provider</div>
</div>

CSS (stylus)

.container
    clearfix()
    border 2px solid purple

.one, .two
    padding 4px

.two
    background #aca 
    float right
    white-space nowrap
    text-overflow ellipsis

.one
    background #caa 
    overflow hidden 
    white-space nowrap
    text-overflow ellipsis