Auto-stretching table-cell div css - html

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).