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

Question

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);
}

Answer 1

The problem here is that both div has content-box class; this class applies position: absolute; , which is the main cause of overlapping. Removing this css property you should be able to se both div.
Regarding date time span you could change the class .content-box .datetime { color: black; font-size: 18px; } (you have to remove the padding)
And add the following properties to .content-box class to display datetime correctly without padding:
display: flex;
flex-flow: column;