CSS fit-content does not fit the real content when there is a line break

I have a fixed container (20em) in row direction. In this container, I would like to have 3 items:

1. An item containing a text (dish name)
2. An item taking the remaining space with a minimum of 10% of the main container (link between dish name and price)
3. An item containing a text (dish price)

In HTML/CSS:

<div class="container">
  <div class="dish">Creamy Mushroom Risotto with Parmesan</div>
  <div class="dots"></div>
  <div class="price">$12.25</div>
</div>

.container {
  display: flex;
  flex-direction: row;
  width: 20em;
  border: 1px solid black;
}

.dish {
  width: fit-content;
}

.dots {
  margin-top: 1em;
  border-top: 1px dotted black;
  min-width: 10%;
  flex-grow: 1;
}

It works well, except when the first item has a line break. In this case, the second item does not take all the remaining space:

https://jsfiddle.net/ptmka1c3/1/

What are my options to get what I want?

Yes, text nodes does not align the text to the minimun depending on the text-align property

You could try to set text-align: justify or try the 2nd option of this answer

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.container {
  display: flex;
  flex-direction: row;
  width: 20em;
  border: 1px solid black;
}

.dish {
  text-align: justify;
}

.dots {
  margin-top: 1em;
  border-top: 1px dotted black;
  min-width: 10%;
  flex-grow: 1;
} 

<!-- language: lang-html -->

<div class="container">
  <div class="dish">Creamy Mushroom Risotto with Parmesan</div>
  <div class="dots"></div>
  <div class="price">$12.25</div>
</div>

<!-- end snippet -->

Edit: Option 2:

Usa different layer for text and dots, and insert the text into a inline element:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.container {
  display: flex;
  flex-direction: row;
  width: 20em;
  border: 1px solid black;
  position: relative;
}

.dots {
  top: 1em;
  border-top: 1px dotted black;
  position: absolute;
  z-index: 1;
  width: 100%;
}

.price,
.dish {
  position: relative;
  z-index: 2;
}

.dish .text {
  display: inline;
  background-color: white;
}

.price {
  margin-left: 1.5rem;
  background-color: white;
}

<!-- language: lang-html -->

<div class="container">
  <div class="dish">
  <span class="text">Creamy Mushroom Risotto with Parmesan</span></div>
  <div class="dots"></div>
  <div class="price">$12.25</div>
</div>

<!-- end snippet -->