console
<div class="box">
<div class="row1 flex">
<span class="item"></span>
<span class="item"></span>
</div>
<div class="row2 flex">
<span class="item"></span>
<span class="item"></span>
</div>
</div>
body {
display: flex;
justify-content: center;
align-items: center;
}
.box {
display: flex;
width: 200px;
height: 200px;
border: 2px solid #ccc;
border-radius: 10px;
padding: 20px;
justify-content: space-between;
flex-direction: column;
}
.item {
display: block;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #666;
}
.flex {
display: flex;
}
.row1 {
justify-content: space-between
}
.row2 {
justify-content: space-between
}