Parent container with child elements position: absolute does not size properly to fit the children

.paginatedContainer {
    /* border: 1px solid blue; */
    border: 1px solid rgba(158, 158, 158, 0.3);
    height: 76px;
    width: min(calc(75vw + 20px), 1270px);
    overflow: hidden;
    position: relative;
    backdrop-filter: blur(18px) saturate(180%);
    box-shadow: 2px 2px 4px rgba(56, 56, 56, 0.6), -2px -2px 4px rgba(56, 56, 56, 0.6);
    border-radius: 10px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.first, .second {
    text-align: center;
    /* width: 600px; */
    position: absolute;
    padding: 0 1rem;
}

<>
    <div className="paginatedContainer animatable disable-select">
        <h3 className="first text-xl text-primary font-giest-regular">
            {"Some long text"}
            <span className="animatedUnderline">Tacoma</span>
            {"Some more long text"}
        </h3>
        <h3 className="second text-xl text-primary font-giest-regular">
            {"More long text"}
            <span className="animatedUnderline">Seattle</span>
            {" and "}
            <span className="animatedUnderline">Tacoma</span>
            {"More long text"}
        </h3>
    </div>
</>