What is the CSS for "width: whatever-is-left-in-the-line;"?

Question

I would like to be able to tell an HTML entity to take up all of the unused space in the line. So, I would have something like:

------------------------------------------------------------------------
| normal text |    as much as possible    | some longer normal text    |
------------------------------------------------------------------------

The problem is that I don't know the size of "normal" or "longer normal", so I can't set pixels, points, or percentages. The best I know how to do is:

<table border="0" cellpadding="0" cellspacing="0" with="100%">
<tr><td style="border: 1px solid red;">normal&nbsp;text</td>
    <td style="border: 1px solid green; width: 100%;">as much as possible</td>
    <td style="border: 1px solid red;">much&nbsp;longer;&nbsp;normal&nbsp;text</td>
</tr>
</table>

This seems really kludgy. Not to mention that you need remember to use   otherwise, the table will put line-breaks in-between your words.

In something like Qt, I would just set the expand property, or the stretchiness. Is there any way to do this with CSS?

Edit: Preferably without using tables

Answer 1

There is a little known but amazingly effective technique for solving this exact problem:

Text-align: justify;

Basically it forces your divs to float to the left and to the right and take up as much space as they need, without having to use floats which have all sorts of other issues associated with them.

The interesting part of this is the added pseudo element. Text-align: justify doesn't apply to the last line (in your case, there is only one line). So you add a false last line after the real content, that way your single line of content gets the effect.

Codepen Demo

HTML:

<div class="container">
  <div class="text">Any length text here</div>
  <div class="text">My Right side text as long as i want</div>
</div>

CSS:

.container {
      text-align: justify;
      line-height: 0; // so that the invisible last line doesn't take up space
      &:after { // adds a false last line to the content so justify is applied
        content: '';
        display: inline-block;
        width: 100%;
      }
    }
.text { display: inline-block; }

further reading: http://www.barrelny.com/blog/text-align-justify-and-rwd/

scss mixins to handle this