Haga que el relleno div quede espacio * horizontal * restante en flexbox

Tengo 2 divs de lado a lado en un flexbox. El de la derecha siempre debe tener el mismo ancho, y quiero que el de la izquierda solo tome el espacio restante. Pero no lo hará a menos que establezca específicamente su ancho.

Por lo tanto, en este momento, está configurado en 96%, lo que se ve bien hasta que realmente aplastas la pantalla; luego, el divisor de la derecha se queda un poco hambriento del espacio que necesita.

Supongo que podría dejarlo como está, pero se siente mal, como si tuviera que haber una manera de decir:

el correcto es siempre el mismo; a la izquierda, obtienes todo lo que queda

.ar-course-nav {
  cursor: poin,ter;
  padding: 8px 12px 8px 12px;
  border-radius: 8px;
}
.ar-course-nav:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

<br/>
<br/>
<div class="ar-course-nav" style="display:flex; justify-content:space-between;">
  <div style="width:96%;">
    <div style="overflow:hidden; white-space:nowrap; text-overflow:ellipsis;">
      <strong title="Course Name Which is Really Quite Long And Does Go On a Bit But Then When You Think it's Stopped it Keeps on Going for even longer!">
                Course Name Which is Really Quite Long And Does Go On a Bit But Then When You Think it's Stopped it Keeps on Going for even longer!
            </strong>
    </div>
    <div style="width:100%; display:flex; justify-content:space-between;">
      <div style="color:#555555; margin-right:8px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;" title="A really really really really really really really really really really really long department name">
        A really really really really really really really really really really really long department name
      </div>
      <div style="color:#555555; text-align:right; white-space:nowrap;">
        Created: 21 September 2016
      </div>
    </div>
  </div>
  <div style="margin-left:8px;">
    <strong>&gt;</strong>
  </div>
</div>