css only: place two items next to each other and make both! wrap only when necessary

I am looking for a way to place two elements next to each other. One element contains a link and the other element two buttons. If it is not possible to fit both elements without a line break, both should wrap at the same time:

big screen:

----------------------------------------------------------------------
https://this-is-a-link.com/with-a-slug                           c  x |
https://this-is-a-link.com/with-a-long-long-long-long-long-slug  c  x |
----------------------------------------------------------------------

small screen:

-------------------------------------
https://this-is-a-link.com/with-  c |
a-slug                            x |
https://this-is-a-link.com/with-  c |
a-long-long-long-long-long-slug   x |
-------------------------------------

What I want to avoid is a scenerio where one element would wrap, but the other would not:

-------------------------------------
https://this-is-a-link.com/with-  c x |
a-slug                                |
https://this-is-a-link.com/with-  c x |
a-long-long-long-long-long-slug       |
-------------------------------------

I want to avoid this also:

-------------------------------------------------------------------
https://this-is-a-link.com/with-a-slug                           c |
                                                                 x |
https://this-is-a-link.com/with-a-long-long-long-long-long-slug  c |
                                                                 x |
-------------------------------------------------------------------

The markup currently looks like this, but can be changed if needed

<ol>
  <li>
    <span class="link">https://this-is-a-link.com/with-a-slug</span>
    <span class="buttons">
      <button>c</button>
      <button>x</button>
    </span>
  </li>
   <li>
    <span class="link">https://this-is-a-link.com/with-a-long-long-long-long-long-slug</span>
    <span class="buttons">
      <button>c</button>
      <button>x</button>
    </span>
  </li>
</ol>

And here is a basic setup in a fiddle.

ol {
  background: lightgrey;
  max-width: 600px;
  list-style-type: none;
}

li {
  border: 1px solid black;
}

<ol><li><span class="link">https://this-is-a-link.com/with-a-slug</span><span class="buttons"><button>c</button><button>x</button></span></li><li><span class="link">https://this-is-a-link.com/with-a-long-long-long-long-long-slug</span><span class="buttons"><button>c</button><button>x</button></span></li></ol>

I tried various things I could think of, like making each li element flex or trying to put the whole list into a grid (trying various minmax() combinations), but I was never able to achieve the effect I would like to see as described above. I have always been running into situations where elements would rather wrap instead of taking the whole space or one element would wrap and the other would refuse to.