In my snippet below you can see that I have two inline elements: first a descriptive label, and then an inline-flex container.

What I wish is for my layout to look like it does in my picture:

However, as you can see in my snippet, as soon as the flex items start wrapping, they cause the flex box to somehow become a block element instead which is very confusing to me. I made the container in my snippet resizeable so you switch between the flex box wrapping and not wrapping and you can see how the flex box remains an inline element as long as it is not wrapping, but becomes a block element as soon as it wraps.

Before Answering: Obviously, the simple solution here is to make the label part of the flex box, however, for this particular project I cannot/do not wish to do that for reasons.

I would understand if there is no solution to my problem and this is just yet another limitation of the amazing and super fun language CSS! I in that case I`ll accept an answer that explains why this is happening because it is very confusing to me.

.container {
  resize: both;
  border: 1px solid black;
  overflow: auto;
}
.flex {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-left: 0.5rem;
}
.flex-item {
  padding: 0.5rem;
  background: #ccc;
}

<div class="container">
  <span>Some inline text:</span>
  <span class="flex">
    <span class="flex-item">Item 1</span>
    <span class="flex-item">Item 2</span>
    <span class="flex-item">Item 3</span>
    <span class="flex-item">Item 4</span>
  </span>
</div>