How to style side-by-side scalable divs - html

Question

How can two divs be styled so that:
they are side by side
the right div expands to fit its contents
the left div expands to fit the space to the left of the right div,
but whose content wraps when it fills the div.
The effect can be achieved with tables like this:
<table class="container">
<tr>
<td class="max">
some text that we want to wrap within the div
</td>
<td class="min">
some other text
</td>
</table>
and
.container {
width: 100%;
}
td.min {
width: 1%;
white-space: nowrap;
border:1px solid blue;
}
td.max {
border:1px solid red;
}
In the following solution with divs, the left div doesn't fill the space if the content doesn't force it to; and the left div will appear above the right when it's content expands.
<div id="container">
<div id="left">some text that we want to wrap within the div</div>
<div id="right">some other text</div>
</div>
and
#container {
width: 100%;
}
#left {
float:left;
border: 1px solid red;
}
#right {
float:right;
border: 1px solid blue;
}

Answer 1

I think you want flexbox
#container {
width: 50%;
margin: 1em auto;
display: flex;
}
#left {
background: lightblue;
flex: 1;
}
#right {
background: lightgreen;
}
<div id="container">
<div id="left">some text that we want to wrap within the div</div>
<div id="right">some other text</div>
</div>

Answer 2

You can use flexbox:
.container {
display: flex;
width: 20%;
}
.right {
white-space: nowrap;
}
<div class="container">
<div class="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum odit saepe eius quisquam! Adipisci obcaecati quia sit eaque quo provident, corrupti iure nisi consequuntur, vero nulla molestias, placeat esse ut!</div>
<div class="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit ullam facilis blanditiis, necessitatibus nihil dicta cupiditate cum vero quod ipsam, nulla minus maxime asperiores natus reprehenderit eaque error ab porro?</div>
</div>