Images and image's descriptions on the same row (Css Html) - html

Question

I have a row with 5 images with the description below, but if the descriptions aren't with the same width the images go up and down, not anymore on the same row.
This is my situation:
Html:
<div class="background">
<div class="layer">
<div class="div-diviso-contenitore">
<div class="div-diviso">
<img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/SILVIA-FAIT-2017_980.jpg">
<div class="overlay">
</div>
</div>
<div class="description">
<p style="color:#ffffff; padding-top:10px; font-size:18px; text-align:left;"><b>Silvia Fait</b></p><br>
<p style="color:#20bed0; padding-top:10px; font-size:20px; margin-top:-27px; text-align:left;">Responsabile ufficio internalizzazione</p><br>
<p style="color:#ffffff; padding-top:10px; font-size:18px; margin-top:-27px; text-align:left;">Mail: estero#confimiemilia.it</p><br>
<p style="color:#20bed0; padding-top:10px; font-size:18px; margin-top:-27px; text-align:left;">Linkdein</p><br>
</div>
</div>
<div class="div-diviso-contenitore">
<div class="div-diviso">
<img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/CLAUDIO-ZAMPARELLI-2017_980.jpg">
<div class="overlay">
</div>
</div>
<div class="description">
<p style="color:#ffffff; padding-top:10px; font-size:18px; text-align:left;"><b>Claudio Zamparelli</b></p><br>
<p style="color:#20bed0; padding-top:10px; font-size:20px; margin-top:-27px; text-align:left;">Responsabile ufficio ufficio economico finanziario fiscale</p><br>
<p style="color:#ffffff; padding-top:10px; font-size:18px; margin-top:-27px; text-align:left;">Mail: fiscaletributario#confimiemilia.it</p><br>
</div>
</div>
<div class="div-diviso-contenitore">
<div class="div-diviso">
<img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/ROBERTA-MAGNANI-2017_980.jpg">
<div class="overlay">
</div>
</div>
<div class="description">
<p style="color:#ffffff; padding-top:10px; font-size:18px; text-align:left;"><b>Roberta Magnani</b></p><br>
<p style="color:#20bed0; padding-top:10px; font-size:20px; margin-top:-27px; text-align:left;">Responsabile ufficio commerciale & sviluppo</p><br>
<p style="color:#ffffff; padding-top:10px; font-size:18px; margin-top:-27px; text-align:left;">Mail: relazioniassociative#confimiemilia.it</p><br>
<p style="color:#20bed0; padding-top:10px; font-size:18px; margin-top:-27px; text-align:left;">Linkdein</p><br>
</div>
</div>
<div class="div-diviso-contenitore">
<div class="div-diviso">
<img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/BARBARA-VANNI-2017_980.jpg">
<div class="overlay">
</div>
</div>
<div class="description">
<p style="color:#ffffff; padding-top:10px; font-size:18px; text-align:left;"><b>Barbara Vanni</b></p><br>
<p style="color:#20bed0; padding-top:10px; font-size:20px; margin-top:-27px; text-align:left;">Responsabile ufficio formazione</p><br>
<p style="color:#ffffff; padding-top:10px; font-size:18px; margin-top:-27px; text-align:left;">Mail: formazione#confimiemilia.it</p><br>
<p style="color:#20bed0; padding-top:10px; font-size:18px; margin-top:-27px; text-align:left;">Linkdein</p><br>
</div>
</div>
<div class="div-diviso-contenitore">
<div class="div-diviso">
<img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/SANDRO-CAMPANI-2017_980.jpg">
<div class="overlay">
</div>
</div>
<div class="description">
<p style="color:#ffffff; padding-top:10px; font-size:18px; text-align:left;"><b>Sandro Campani</b></p><br>
<p style="color:#20bed0; padding-top:10px; font-size:20px; margin-top:-27px; text-align:left;">Responsabile ufficio relazioni sindacali</p><br>
<p style="color:#ffffff; padding-top:10px; font-size:18px; margin-top:-27px; text-align:left;">Mail: sindacale#confimiemilia.it</p><br>
<p style="color:#20bed0; padding-top:10px; font-size:18px; margin-top:-27px; text-align:left;">Linkdein</p><br>
</div>
</div>
</dvi>
</div>
Css:
.background {
background-image: url('http://77.238.26.244:81/confimi/wp-content/uploads/2016/08/a.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
height: 100%;
}
.layer {
background-color: rgba(18, 29, 47, 0.96);
background-repeat: repeat;
width: 100%;
height: 100%;
text-align: center;
padding: 200px 20px 200px 20px;
}
.div-diviso {
width: 100%;
position: relative;
}
.div-diviso-contenitore {
width: 17%;
margin: 10px;
display: inline-block;
position: relative;
}
.div-diviso img {
width: 100%;
position: relative;
}
.div-diviso .overlay {
width: 100%;
height: 100%;
position: absolute;
box-sizing: border-box;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.6);
opacity: 0;
transform: scale(0.1);
-webkit-transform: scale(0.1);
-moz-transform: scale(0.1);
-ms-transform: scale(0.1);
-o-transform: scale(0.1);
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
visibility: hidden;
}
.div-diviso:hover .overlay {
opacity: 1;
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
visibility: visible;
border: 3px solid #ffffff;
transform: border 2.75s;
}
#media (min-width: 768px) and (max-width: 980px) {
.layer {
text-align: center;
}
.div-diviso-contenitore {
width: 47%;
margin: 10px;
}
}
#media (max-width: 767px) {
.layer {
text-align: center;
}
.div-diviso-contenitore {
width: 98%;
margin: 5px;
}
}
This is what I would like:

Answer 1

The problem is occurring because of vertical alignment. Set the value of vertical-align: top; and you will have the expected output.
Plunkr
.div-diviso-contenitore {
width: 17%;
margin: 10px;
display: inline-block;
position: relative;
vertical-align: top;
}

Answer 2

See this fiddle
Add this CSS
.div-diviso-contenitore {
vertical-align: top;
}

Answer 3

First you need to give a specific height to the class div-diviso-contenitore.
Here i have rewritten the class div-diviso-contenitore
.div-diviso-contenitore {
display: inline-block;
height: 400px; // give your specific height value
margin: 10px;
overflow: hidden;
position: relative;
width: 17%;
word-wrap: break-word;
}
What difference from your class is
height: 400px;
word-wrap: break-word;
overflow: hidden;
Check this fiddle : https://jsfiddle.net/ganesh16889/wfe58x97/