How to prevent additional whitespace when text is wrapped with grid or flexbox [duplicate]

I want to display a simple icon after some text. When the text is too long the text is wrapped but the icon is pushed to the right because the grid/flex item seems to want to use all available space.

I have the following HTML:

<div class="wrapper"><div class="container"><div>Some very very very very very very very very very long piece of text</div><div class="icon">I</div></div></div>

The CSS using flexbox is defined as:

.wrapper {  width: 100px;}.container {  display: inline-flex;  gap: 0.5rem;}.container .icon {  flex: 0 0 auto;}

I also tried using grid:

.container {  display: grid;  grid-template-columns: minmax(0, 1fr) 1rem;  gap: 0.5rem;}

In both situations I get the following result:

| Some very very very very very very     | I || very very very long piece of text      |   |

How can I get rid of the extra whitespace in the text column?