Auto-stretching table-cell div css

Question

I know there is a lot of similair questions but none of them helped me to solve this. I have very simple setup:

.wrapper {
  width: 100%;
  display: table;
}

.dontBreakmyLine {
  display: table-cell;
}

.iCanUseWhatIsLeft {
  display: table-cell;
}

<div class="wrapper">
  <div class="dontBreakmyLine">
    Some generated text
  </div>
  <div class="iCanUseWhatIsLeft">
    Another generated text
  </div>
</div>

Now I need to stretch first div to content and let the another one take remaining space. I know that maximum width of generated text in first div will be 300px, but max-width dont work here as I would like. Any suggestions please?

Answer 1

There is probably a better way, but if you're okay with the line not breaking you can set the left cell to a small width and set the text not to break on whitespaces

Here is a fiddle

http://jsfiddle.net/hqWaU/

.wrapper {
    width: 100%;
    display: table;
}
.dontBreakmyLine {
    display: table-cell;
    width: 1px;
    white-space:nowrap;
}
.iCanUseWhatIsLeft {
    display: table-cell;
}
div {
    border: 1px solid silver;
}

Answer 2

A possible solution without display: table; would be to set both boxes to position: relative;, float the left and stretch the right one with right: 0px; (DEMO).

.wrapper {
    width: 100%;
}

.dontBreakmyLine {
    max-width: 300px;
    float: left;
    position: relative;
    z-index: 2;
}

.iCanUseWhatIsLeft {
    position: relative;
    right: 0px;
    z-index: 1;
}

The text will break as soon as it's longer than 300px but If it won't be longer it doesn't matter. Add display: table-cell back to the boxes if you don't want the right text flow under the left text.

If you still wan't to prevent the line-break you can use white-space:nowrap; maybe even in combination with overflow: hidden; (DEMO).