CSS positioning content by active element

I want the active element to be centered in parent element when there is enough other child elements after and before it. When the active element is first of the children, it should remain on the left. When the active element is last of the children, it should remain on the right.

<div class="container">
<div class="recent-dates">
<a class="date-text" href="/14159#2020-08-05">Wed&nbsp;05</a>
<a class="date-text" href="/14159#2020-08-06">Thu&nbsp;06</a>
<a class="date-text" href="/14159#2020-08-07">Fri&nbsp;07</a>
<a class="date-text" href="/14159#2020-08-08">Sat&nbsp;08</a>
<a class="date-text" href="/14159#2020-08-09">Sun&nbsp;09</a>
<a class="date-text" href="/14159#2020-08-10">Mon&nbsp;10</a>
<a class="date-text" href="/14159#2020-08-11">Tue&nbsp;11</a>
<a class="date-text" href="/14159#2020-08-12">Tue&nbsp;12</a>
<a class="date-text" href="/14159#2020-08-13">Thu&nbsp;13</a>
<a class="date-text active" href="/14159#2020-08-14">Fri&nbsp;14</a>
<a class="date-text" href="/14159#2020-08-15">Sat&nbsp;15</a>
<a class="date-text" href="/14159#2020-08-16">Sun&nbsp;16</a>
</div>
</div>

.container {
   width: 500px  
}

.recent-dates {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #181717;
    height: 60px;
    overflow: hidden;
}

.date-text {
    font-weight: normal;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.4);
    padding: 10px;
}

.date-text.active {
    font-weight: bold;
    color: #62E479;
}

Jsfiddle to illustrate the problem https://jsfiddle.net/koyz1arv/

I could do this by my self with JavaScript but may be there is some CSS-only solution?

EDIT (to make it clearer)

The active element should be be in the middle of the parent when there is enough elements before and after it. Spaces between child elements must stay the same.