JSFiddle - React, Tailwind, and code Playground

HTML

<!--
Problem:
    
Pure CSS source-order dynamic-width columns, second column takes all available width.
  
The left column (.b) has varying content width (the JS simulates this), and should shrink to this width.

The right column (.a) has full-width content, and .a should take up as much space as possible without breaking the column layout.

The columns will also have variable heights, but that's not a problem in this case (overflow:hidden on the wrapper handles this nicely).
-->

<div id="source-order">
    <div class="a"></div>
    <div class="b"></div>
</div>

<!-- Problem with display-order: bad source order -->
<div id="display-order">
    <div class="b"></div>
    <div class="a"></div>
</div>

<!-- ??? -->
<div id="solution">
    <div class="a"></div>
    <div class="b"></div>
</div>

CSS

body > div {
    margin-bottom: 1em;
    overflow: hidden;
}

.a {
    background: red;
    height: 100px
}
.b {
    background: blue;
    height: 75px;
    color: #CCC;
}

#source-order .a {
    float: left;
    /* Problem with source-order: fixed size columns */
    width: 67%;
    margin-left: 33%;
}
#source-order .b {
    float: left;
    /* Problem with source-order: fixed size columns */
    width: 33%;
    margin-left: -100%;
}

#display-order .b {
    float: left;
}
#display-order .a {
    overflow: hidden;
}

#solution .a {

}
#solution .b {

}

JavaScript

var c = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ123456780',
    t = '', i;
for (i=0; i<Math.random()*250; i++)
    t += c[parseInt(Math.random()*c.length)];
$('.b').text(t);