HTML ellipsis without specifying the particular width

Question

I'm trying to achieve the following layout (please see the screenshot below).

• If both SPAN and B fit the box - they just go one after another.
• If they don't - SPAN has an ellipsis but B is displayed completely (it is never bigger than a whole block).

B can be included into the SPAN - but it didn't help me. I was also trying to use tables, even nested ones - nothing helps..

Expected behavior:

Initial snippet:

div {
  width: 200px;
  white-space: nowrap;
  border: 1px solid red;
  margin-top: 10px;
}

span {
  overflow: hidden;
  text-overflow: ellipsis;
}

b {
  padding-left: 10px;
}

<div>
  <span>test</span>
  <b>12345</b>
</div>

<div>
  <span>test test test test test test test test test test test</span>
  <b>50</b>
</div>

Answer 1

Just add display: flex to the div container:

div {
  display: flex; /* new */
  width: 200px;
  white-space: nowrap;
  border: 1px solid red;
  margin-top: 10px;
}

span {
  overflow: hidden;
  text-overflow: ellipsis;
}

b {
  padding-left: 10px;
}

<div>
  <span>test</span>
  <b>12345</b>
</div>

<div>
  <span>test test test test test test test test test test test</span>
  <b>50</b>
</div>

A combination of flex default settings, including flex-shrink: 1, enable the ellipsis to render in a flex formatting context.