Right align all elements when text makes a new line

Question

I have a set of divs and want the children to be right aligned:

.parent {
  width: 150px;
  border: solid;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

<div class="parent">
  <div class="icon">x
  </div>
  <div>Toooooooo looooooooong</div>
</div>

When the text breaks in a newline, it still occupies all the space, so it's not at the right. I could use width: min-length, but then all the short texts with spaces break in a new line, and I want it only for the long ones.

Here's the example in CodePen: https://codepen.io/rveciana/pen/eYpyKJX