Trim text inside flexbox

Question

I have a row has two text blocks inside, and flexbox is used to make it responsive.

The goal I am trying to achieve is the text length will not exceed 98% of parent container, and the two text blocks should sit next to each other.

For example:

• long text will be : [longgggggg...*]
• short text will be: [short* ]

To trim text, I set flex basis of main text to 98%. But after I did that, the asterisk mark is moved to right edge. Is there a way I can make the asterisk mark sit next to the main text?

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  background: #e3e3e3;
}

.label {
  color: #000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 0;
  flex: 1 1 98%;
}

.label-asterisk {
  color: #a72e12;
}

<div class="container">
  <span class="label">short</span>
  <span class="label-asterisk">*</span>
</div>

Answer 1

By adding max-width: fit-content to .label the asterisk is placed next to the short text as expected.

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  background: #e3e3e3;
}

.label {
  color: #000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 0;
  flex: 1 1 98%;
  max-width: fit-content;
}

.label-asterisk {
  color: #a72e12;
}

<h1>short text</h1>
<div class="container">
  <span class="label">short</span>
  <span class="label-asterisk">*</span>
</div>

<h1>long text</h1>
<div class="container">
  <span class="label">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </span>
  <span class="label-asterisk">*</span>
</div>