CSS - place element right after multiline text

Question

I would like to place element right after some title, which can be multiline. I want to place it without white blank space when there some text wrap occur.

This one-line title is easy:

But following multiline title has a lot of blank space after

What I got so far is following code:

div {
  display: inline-flex;
  justify-content: space-around;
  align-items: center;
  max-width: 220px;
}

.text {
  font-weight: bold;
  font-family: "Inter UI", sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #777777;
  line-height: 120%;
  display: inline-block;
  flex-grow: 0;
  flex-shrink: 1;
}

.new {
  width: 30px;
  height: 16px;
  box-sizing: border-box;
  border: 1px solid #fe7f66;
  border-radius: 4px;
  text-transform: uppercase;
  font-size: 8px;
  line-height: 10px;
  letter-spacing: 0.1em;
  color: #fe7f66;
  display: inline-block;
  text-align: center;
  padding: 2px 0;
  flex-shrink: 0;
  flex-grow: 0;
}

<div>
  <span class="text">STRING/ COUNTRY BASED ENGAGEMENT</span>
  <span class="new">new</span>
</div>