How can I show text after text overflow ellipsis in a row?

I have my .mainText with a dynamic text and my .secText with another text. This divs or spans in a .content that is a row in a table. My content width is fix.

I would like to see my .secText all time after the .mainText content no matter if my .mainText content is too long or not.

I think it can be achieve with .display: flex but I didn't find the way for it...

So my current is: |Test loooooo...|

and my expected is: |Test looo...(5)|

.content {
  width: 120px;
  border: 1px solid black;
  overflow: hidden;
  text-wrap: nowrap;
  text-overflow: ellipsis;
}

.mainText {
  color: blue;
}

.secText {
  color: red;
}

<div class="content">
  <span class="mainText">Test looooooooooooong </span>
  <span class="secText">(5)</span>
</div>

Solution

Yes, make the container a flexbox, then apply your overflow styling on the main text element.

.content {
  width: 120px;
  border: 1px solid black;
  display: flex;
}

.mainText {
  color: blue;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;  
}

.secText {
  color: red;
}

<body>
  <div class="content">
    <span class="mainText">Test long long long long long long</span>
    <span class="secText">(5)</span>
  </div>
</body>