span position inside a flexbox - css

Question

I'm having troubles with one of a my flex items.
I'm trying to position the 2 spans of my flex div so that one is above the other, but it looks like the properties of flex force them to be next of each other.
Here is what I'm looking to do (the date element)
and here is what I have :
#til-container #til-header #til-date-container {
display: flex;
align-items: center;
position: absolute;
top: 30px;
margin: auto;
width: 60px;
height: 60px;
border-radius: 50%;
border: 1px solid #CCC;
background: white;
}
#til-container #til-header #til-date-container #til-date {
display: flex;
align-items: center;
position: relative;
margin: auto;
width: 52px;
height: 52px;
border-radius: 50%;
background: #d24949;
color: #FFF;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
font-weight: 900;
text-align: center;
}
#til-container #til-header #til-date-container #til-day {
font-size: 20px;
}
#til-container #til-header #til-date-container #til-month {
font-size: 10px;
}
<div id="til-container">
<div id="til-header">
<div id="til-date-container">
<div id="til-date">
<span id="til-day">25</span>
<br/>
<span id="til-month">dec</span>
</div>
</div>
</div>
</div>
I've tried several things such has displaying the spans as blocks so they take the full width of the container and force the next span to position below the first one, but that wouldn't work. Any ideas ?

Answer 1

Using flex, you could add to #til-date
flex-direction: column;
justify-content: center;
I edited your snippet to add it :
#til-container #til-header #til-date-container {
display: flex;
align-items: center;
position: absolute;
top: 30px;
margin: auto;
width: 60px;
height: 60px;
border-radius: 50%;
border: 1px solid #CCC;
background: white;
}
#til-container #til-header #til-date-container #til-date {
display: flex;
align-items: center;
position: relative;
margin: auto;
width: 52px;
height: 52px;
border-radius: 50%;
background: #d24949;
color: #FFF;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
font-weight: 900;
text-align: center;
/* Added */
flex-direction: column;
justify-content: center;
}
#til-container #til-header #til-date-container #til-day {
font-size: 20px;
}
#til-container #til-header #til-date-container #til-month {
font-size: 10px;
}
<div id="til-container">
<div id="til-header">
<div id="til-date-container">
<div id="til-date">
<span id="til-day">25</span>
<br/>
<span id="til-month">dec</span>
</div>
</div>
</div>
</div>