I’m having an issue where I want to ensure that there is no empty space between the icon and the text after a line break. I want the width of the text to be equal to its content width after the break, and not more. I’m using display: flex on the parent element, which seems to be causing this issue.

Image showing the problem:

.parent {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

<div class="parent">
  <h2 class="text">text textttt aaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h2>
  <span class="icon">></span>
</div>