CSS How to align the box and the description? - html

Question

I'm new to ASP.Net CSS.
Can anyone tell me how can I align my box with its description up(color_box) and down(description).
This is my current issue image.
My CSS image
My Html Code Below:
<div class="container-box">
<div class="box blue">
<div class="text blue">Blue</div>
</div>
<div class="box black">
<div class="text black">Black</div>
</div>
<div class="box green">
<div class="text green">Green</div>
</div>
</div>
My CSS Code Below:
.container-box{
border: 1px solid black;
background-color: lightblue;
padding-top: 40px;
padding-right: 50px;
padding-bottom: 350px;
padding-left: 80px;
}
.box{
float: left;
width: 20px;
height: 100px;
margin: 10px;
margin-left:0.01%;
border: 80px solid rgba(0, 0, 0, .2);
}
.blue{
background:blue;
}
.black{
background:black;
}
.green{
background:green;
}
.text{
float: left;
width: 320px;
padding: 10px;
border: 5px solid dotted;
margin:100px;
margin-right:100%;
color:white;
}
<div class="container-box">
<div class="box blue">
<div class="text blue">Blue</div>
</div>
<div class="box black">
<div class="text black">Black</div>
</div>
<div class="box green">
<div class="text green">Green</div>
</div>
</div>
Correct me or please provide me some solution for my doubt.
Thank you.