I have two elements which should be put on the edges of the screen if it is large enough, or, it they have to wrap, they wrap and align themselves horizontally.

Like this (imagine those are browser windows):

• no overflow (notice how elements stick to the sides):

╔════════════════════════════════╗
║Ooh boy some text          [btn]║
║                                ║
╚════════════════════════════════╝

• yes overflow (notice how elements now are aligned in the center):

╔═══════════════════════╗
║   Ooh boy some text   ║
║         [btn]         ║
╚═══════════════════════╝

Preferably I should do it with pure CSS, without hardcoding sizes via @media (min-width: ...), etc.

So far I have tried using flexbox and it’s wrapping and play with margin: 0 auto to make it have empty space in the middle. But I couldn’t manage to make it work when wrapped – anything always keeps sticking to the sides instead of staying in the center.

Half-successful attempts at implementing it

Here is a file that I use for testing:

#container {
  resize: both;
  overflow: scroll;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

<div id="container">
  <div>aaaaaa</div>
  <div style="margin: 0 0 0 auto">
    <div>bbbbbbb</div>
  </div>
</div>

Also, following attempts are ones which got the non-wrapping case correct, like this:
All as described in question above

Attempt #1

There is a first iteration of using separator.

<div id="container">
    <div>aaaaaa</div>
    <div style="margin: 0 auto"></div>
    <div>bbbbbbb</div>
</div>

Result:
First block sticks to the left

Attempt #2

Inserted second element into separator and gave it margin-left: auto:

<div id="container">
    <div>aaaaaa</div>
    <div style="margin: 0 0 0 auto"><div>bbbbbbb</div></div>
</div>

Result:
Second block sticks to the right