Align circles and text made with css - html

Question

I made this layout but I can't find a way to align the circles and the text on the same line. As you can see in the first picture there's a problem both with circles and text. I'd like to achive the result you see in the 2nd picture.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.grid {
display: flex;
flex-wrap: wrap;
max-width: 980px;
width: 100%;
margin: auto;
padding-top: 5%;
padding-bottom: 5%;
}
.cell {
flex-basis: 33.3%;
display: flex;
justify-content: center;
align-items: center;
}
.cell:before {
padding-bottom: 100%;
display: block;
content: '';
}
.circle {
width: 250px;
height: 250px;
border: 0.5px solid;
border-radius: 50%;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
box-shadow: 0px 0px 15px 0px;
overflow: hidden;
margin: 0 auto 1em;
}
.circle img {
width: 100%;
position: relative;
height: 100%;
}
h3 {
text-align: center;
}
.inner {
text-align: start;
padding-bottom: 15%;
}
<div class="grid">
<div class="cell">
<div class="inner">
<div class="circle" style="background-image:url('https://freight.cargo.site/t/original/i/655f74e74d3b88cc9d367ba8cccd79680c3837a84a547f9e03b6f39981f424e0/3.png');"></div>
<div class="caption">
<h3>Chiara Bersani <br> Marta Montanini</h3>
</div>
</div>
</div>

Answer 1

First, you will have to remove your manual line breaks <br>. Once you do this, the text can wrap automatically without having odd breaks at specific breaking points. If you want to force a line break, use horizontal padding on .caption h3.
Once you do this, just use align-items: self-start; on .grid.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.grid {
display: flex;
flex-wrap: wrap;
align-items: self-start;
max-width: 980px;
width: 100%;
margin: auto;
padding-top: 5%;
padding-bottom: 5%;
}
.cell {
flex-basis: 33.3%;
display: flex;
justify-content: center;
align-items: center;
}
.cell:before {
padding-bottom: 100%;
display: block;
content: '';
}
.circle {
width: 250px;
height: 250px;
border: 0.5px solid;
border-radius: 50%;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
box-shadow: 0px 0px 15px 0px;
overflow: hidden;
margin: 0 auto 1em;
}
.circle img {
width: 100%;
position: relative;
height: 100%;
}
.caption h3 {
text-align: center;
padding: 0 2em;
}
.inner {
text-align: start;
padding-bottom: 15%;
}
<div class="grid">
<div class="cell">
<div class="inner">
<div class="circle" style="background-image:url('https://freight.cargo.site/t/original/i/655f74e74d3b88cc9d367ba8cccd79680c3837a84a547f9e03b6f39981f424e0/3.png');"></div>
<div class="caption">
<h3>Chiara Bersani Marta Montanini</h3>
</div>
</div>
</div>
<div class="cell">
<div class="inner">
<div class="circle" style="background-image:url('https://freight.cargo.site/t/original/i/655f74e74d3b88cc9d367ba8cccd79680c3837a84a547f9e03b6f39981f424e0/3.png');"></div>
<div class="caption">
<h3>Chiara Bersani Longer TEXT...........................</h3>
</div>
</div>
</div>
<div class="cell">
<div class="inner">
<div class="circle" style="background-image:url('https://freight.cargo.site/t/original/i/655f74e74d3b88cc9d367ba8cccd79680c3837a84a547f9e03b6f39981f424e0/3.png');"></div>
<div class="caption">
<h3>Chiara Bersani Marta Montanini more text lorem foo</h3>
</div>
</div>
</div>
</div>