CSS Flexbox Center Horizontal

I have a flexbox container that contains 2 div

items. The flexbox container is for a row that centers the content inside. I am trying to find a way to center the content of a row on the first element and then the second element will be to the right of the first centered element.

Below is what I had to do: have the first item centered using flexbox, but then I have to position the absolute position of the second item to the desired position. Is there a way to remove the absolute positioning of the second element and display it to the right of the first element that is centered?

Html

<div class="center-container">
    <div class="time">
        <span id="time">00:00</span>
    </div>
    <div class="time-ampm">
        <span id="time-ampm">XX</span>
    </div>
</div>

      

        
        
        
      

    

CSS

.center-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
}

.time {
    flex: 1;
    font-size: 50px;
    font-weight: 300;
    color: #262626;
}

.time-ampm {
    position: absolute;
    top: 115px;
    left: 288px;
    /* flex: 1; <= this is what I want to use, not the absolute positioning used above */
    font-size: 20px;
    font-weight: 400;
    color: #858585;
}

      

        
        
        
      

    

This line shows where flexbox will center the content if both items are set with flexbox (not absolute positioning as above)

This line shows where I want the flexbox to center the items (centered on the first item)