Dynamic width of table div - html

Question

I need to have a div construct with a table-display, while the first cell should be as wide as the content fit to it without linebreak. The second cell should take the rest of the width,
html
<div class="table full-width">
<div class="table-cell">Cell 1 without br</div>
<div class="table-cell">Cell 2 just the rest width</div>
</div>
css
.full-width {
width: 100%;
}
.table {
display: table;
}
.table-cell {
display: table-cell;
}

Answer 1

I would highly recommend not explicitly styling <div>s as table elements. Use the default HTML elements for that, or perhaps use more fluid formatting styles, such as float.
However, I suggest you use the more modern CSS3 flex-box, with its children style flex-grow. It gives you a lot more flexibility in situations like these.
div.container {
display: flex;
background-color: lightgrey;
padding: 20px;
justify-content: space-between;
}
div.shrink, div.grow {
padding: 20px;
margin: 0 10px;
background-color: grey;
flex-basis: auto;
}
div.shrink {
flex-shrink: 1;
}
div.grow {
flex-grow: 1;
}
<div class="container">
<div class="shrink">
This will shrink!
</div>
<div class="grow">
This will grow!
</div>
</div>

Answer 2

You can try this:
HTML
<div class="table full-width">
<div class="table-cell">Cell 1 without br</div>
<div class="table-cell cell-wide">Cell 2 just the rest width</div>
</div>
CSS
.full-width {
width: 100%;
}
.table {
display: table;
}
.table-cell {
display: table-cell;
white-space: pre;
}
.cell-wide {
width: 100%
}
Fiddle