Why can't the responsive box be positioned centered at the bottom of the container?

Question

css

I have an adaptive block with a width depending on the inscription. How to position it exactly at the bottom center of the breadcrumbs block so that it remains adaptive all the time. With the help of margins, I managed to arrange it the way I want, but there is a noticeable difference of 1px between chrome and safari browsers (I tried both pixels and em). It seems that such 1px, but on the site it immediately catches the eye. How can this be corrected? I look in the direction of absolute positioning, but then it turns out to be a problem with adaptability .. Sketched a fidl . (another gap arose in contrast to the original)

Answer 1

Nevertheless, I achieved the correct answer to my question
Thanks for the help!

.trail-end-wrapper {
    display: table-cell;
    min-width: 276px;
    height: 48px;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 0);
}

Answer 2

Because of what there may be gaps
https://toster.ru/answer?answer_id=673057#answers_...
The rest is not clear, show the design.