Senhores, estou tentando inserir uma div embaixo da outra, a mesma deve ficar conforme imagem em anexo, porém quando executo não está dando certo.
Segue um trecho do meu código, deve ser algum detalhe que devo estar deixando passar e não estou conseguindo identificar.
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.jumbo {
background-image: url(https://unsplash.it/600/300);
background-size: cover;
}
.container {
width: 60%;
margin: 0px 160px ;
box-sizing: border-box;
border: 1px solid red;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
padding-top: 1rem;
}
.box {
width: calc(50% - 2rem);
height: 2rem;
margin: 1.0em 1em;
box-sizing: border-box;
border: 1px solid black;
display: flex;
}
.p1, .p2, .p3 {
display: flex;
align-items: center;
justify-content: center;
color: blue;
font-family: sans-serif;
font-weight: bold;
background-color: #ffffff;
}
.p1 {
flex-grow: 2;
background-color: cyan;
position: right;
}
.p2 {
flex-grow: 1;
background-color: blue;
color: #fff;
position: right;
}
.p3 {
flex-grow: 1;
background-color: white;
position: right;
}
<div class="jumbo">
<div class="container">
<div class="box">
<div class="p1">
GABRIEL P
</div>
<div class="p2">
10.000,00
</div>
<div class="p3">
55%
</div>
</div>
<div class="box">
<div class="p1">
texto1
</div>
<div class="p2">
texto2
</div>
<div class="p3">
texto3
</div>
</div>
<div class="box">
<div class="p1">
texto1
</div>
<div class="p2">
texto2
</div>
<div class="p3">
texto3
</div>
</div>
</div>
</div>