How can I make this square-inside-square structure horizontal? - html

Question

I'm trying to represent this structure horizontaly, but I'm having some issues on what should I change so that this can work properly. What I hope to achieve is that those small squares in the bottom appear the same, only verticaly, on top of each other, while the bigger square keeps it's model.
.date-grid {
width: 120px;
height: 100px;
display: flex;
flex-direction: column;
}
.node {
width: 100%;
height: 100%;
background: #e9ecef;
border: none;
padding: 0;
}
time {
display: block;
height: 75%;
font-size: 24px;
display: flex;
flex-direction: column;
justify-content: center;
}
.smallHolder {
width: 100%;
height: 25%;
display: flex;
}
.smallHolder>div {
width: 25%;
height: 100%;
flex-shrink: 0;
flex-grow: 1;
}
.next { background: #0060df; }
.last { background: #d53343; }
<div class="date-grid">
<button class="node">
<time>3</time>
<div class="smallHolder">
<div class="next"></div>
<div class="last"></div>
</div>
</button>
</div>

Answer 1

Is this the sort of thing you're looking for? grid is great for this sort of thing.
.date-grid {
height: 100px;
display: grid;
grid-template-columns: 120px 25px;
grid-template-rows: 1fr 1fr;
grid-template-areas: "gray next" "gray last";
padding: 0;
border-style: none;
}
.gray {
grid-area: gray;
display: grid;
place-content: center;
background: #e9ecef;
}
time {
font-size: 24px;
}
.next {
grid-area: next;
background: #0060df;
}
.last {
grid-area: last;
background: #d53343;
}
<button class="node date-grid">
<time class='gray'>3</time>
<div class="next"></div>
<div class="last"></div>
</button>