Two spans, one is centered in div as if there are no another and another in the right side

I should implement something like this:

<div class="container">
  <span class="title">Header</span>
  <span class="label">today</span>
</div>

The Header should be centered in the div. And the label should be placed right after. So, I need something like this:

So, Header should be centered independently on a label span, as if there are no label at all.

Is that possible to solve it with pure CSS and if yes, then how? Markup can be changed.

>Solution :

position:absolute can do it

.container {
  width: 400px;
  padding: 5px;
  border: 1px solid;
  text-align: center; /* center the text */
  /* to illustrate the center */
  background:linear-gradient(red 0 0) 50%/2px 100% no-repeat;
}
.label {
  position: absolute; /* out of the flow but don't define any position */
}

.title {
 margin-inline: 5px; /* control the gap */
}

<div class="container">
  <span class="title">Header</span>
  <span class="label">today</span>
</div>