How to align text paragraph with icon in a flexbox container? [duplicate]

I have a flex container with two children:

1. A paragraph (<p>) element with text that can wrap when necessary.
2. A fixed-size icon (<div>) element.

I want to position the icon right next to the text, leaving only a small gap between them (gap property in container).

This works fine when the text doesn’t need to wrap.

However, when the text wraps, the paragraph takes up more space than the actual size of the text, causing the distance between the icon and the text to increase more than I would like.

Question: How can I make the paragraph shrink to the exact size of the text inside it, so the gap between the icon and the text remains consistent even when the text wraps? I’m using flexbox for layout, but I’m open to other solutions if needed.

#resizable-container {  width: 380px;  height: 100px;  min-width: min-content;  resize: horizontal;  overflow: scroll;  outline: 1px solid black;  font-size: 20px;  padding: 20px;}#flex-container {  display: flex;  flex-direction: row;  align-items: center;  gap: 20px;}#text {  margin: 0;}#icon {  display: flex;  flex: 0 0 auto;  width: 20px;  height: 20px;  background-color: red;}

<div id="resizable-container"><div id="flex-container"><p id="text">Loremipsum dolorsitamet consectetur</p><div id="icon"></div></div></div>