How can I wrap a floating range under another floating range, within a floating range [chart included]?

I have a news / chat window. Each entry contains two spaces: #user and #message. I would like #user to swim to the left, and #message to swim to the left. If #message causes the line to exceed the width of the container, #message should be wrapped below #user, as shown in the diagram below.

By default, #message jumps completely to #user if it does not fit on the same line. I tried a space: nowrap on each element, but that also doesn't seem like a trick.

reference