Cannot set div's width to minimum when text breaks to new line

Question

I need to position an element to the right side of a div with text. The text breaks into a new line if it is too long and does not fit the parent div, however the element to the right doesn't start where the original div ends, there is some extra space left.

Consider this example:

.container {
  display: flex;
  width: 250px;
}

.text {
  background: orange;
  display: inline-block;
}

.x {
  background: aquamarine; 
  flex-grow: 1;
}

<div class="container">
  <div class="text">Some text that will break tonextlineeee</div>
  <div class="x">X</div>  
</div>

Here I would like the .text div to break, but also the div's width to shrink to the (now broken) content's new width, leaving up more space for the .x div (to which I added flex-grow: 1).

The closest I was able to get was to add width: min-content to the .text div but that makes it break into as many new lines as it can, not exactly what I needed. Trying to limit it afterwards with line-clamp: 2 or anything else doesn't seem to work