Overlapping Divs, need them to be vertical on top of each other

I'm trying to stack the on top of each other vertically but they are overlapping for some reason and not sure if it has to do with the positioning. I'm not very good at CSS. Also, is there an easier way to align the datetime span to the right side instead of using padding-left: 1140px? Thank you

<div class="content-box">
  <span class="name">John Doe</span>
  <span class="datetime">May 2022</span><br><br>
  <span class="content">Lorem ipsum</span>
</div>
<div class="content-box">
  <span class="name">Jane Doe</span>
  <span class="datetime">June 2022</span><br><br>
  <span class="content">Lorem ipsum</span>
</div>

.content-box {
    justify-content: center;
    top: 600px;
    position: absolute;
    width: 75%;
    border: none;
    outline: none;
    font-family: 'Roboto Mono', monospace;
    font-size: 18px;
    transform: translate(0);
    background-image: linear-gradient(45deg, #4568DC, #B06AB3);
    padding: 20px 40px;
    border-radius: 5px;
    box-shadow: 0 22px 44px rgba(128, 128, 128, 0.1);
    transition: box-shadow .25s;
    padding: 60px;
}

.content-box .name {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(45deg, #4568DC, #B06AB3);
    font-size: 30px;
}

.content-box .content {
    color: #4568DC;
    font-size: 20px;
}

.content-box .datetime {
    padding-left: 1140px;
    color: black;
    font-size: 18px;
}

.content-box .content {
    color: #4568DC;
    font-size: 20px;
}

.content-box:after {
    content: '';
    border-radius: 4px;
    position: absolute;
    margin: 1px;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
    background: white;
}

.content-box:hover {
    background-image: linear-gradient(-45deg, #00FFFF, #ff1a1a);
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    transition: .5s;
}

.content-box:hover .name {
    background-image: linear-gradient(-45deg, #4568DC, #B06AB3);
}