<div class="outer-container">
<div class="inner-container">
<div class="inner-item">Item 1</div>
<div class="inner-item">Item 2</div>
</div>
<div class="inner-container">
<div class="inner-item">Item 3</div>
<div class="inner-item">Item 4</div>
</div>
</div>
/* Outer container for nesting */
.outer-container {
display: flex;
justify-content: space-around;
align-items: center;
height: 300px;
background-color: #f0f0f0;
padding: 10px;
}
/* Inner flex containers */
.inner-container {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
background-color: #007bff;
padding: 10px;
width: 120px;
height: 200px;
border-radius: 5px;
color: white;
}
/* Individual items inside inner containers */
.inner-item {
background-color: #28a745;
padding: 10px;
border-radius: 3px;
width: 80px;
text-align: center;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.