responsive gallery with description giving problem - html

Question

I'm trying to build an image gallery with description below the image. Every thing run well except when i added in a longer description, the second row goes misorder.
How to overcome this issue?
my testing site is : http://osakaairport.com/airlines/index.htm
below is the sample code: (short code due to limited by stack overflow)
<style>
#media only screen and (max-width: 500px) {
.responsive-main {
width: 100%;
}
}
*{
box-sizing: border-box;
}
.responsive1 {
padding: 0 6px;
float: left;
width: 19.99999%;
}
#media only screen and (max-width: 500px) {
.responsive1 {
width: 32%;
}
div.desc1 {
padding-top:3px;
padding-bottom:10px;
text-align: center;
font-size: 12px;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
</style>
<div class="responsive1">
<div class="gallery1">
<a href="china_airlines/index.htm">
<img src="../images/airlines/china_airlines_logo.png" alt="China Airlines"></a>
<div class="desc1">Japan Airlines Japan Airlines</div>
</div>
</div>
<div class="responsive1">
<div class="gallery1">
<a target="_blank" href="../facilities/wifi.htm">
<img src="../images/airlines/airasia_indonesia.png" alt="airasia indonesia"> </a>
<a target="_blank" href="../facilities/wifi.htm">
<div class="desc1">All Nippon Airways</a></div>
</div></div>
<div class="responsive1">
<div class="gallery1">
<a target="_blank" href="../facilities/wifi.htm">
<img src="../images/airlines/cebu_pacific.png" alt="cebu pacific">
</a>
<div class="desc1">Peach</div>
</div>
</div>
<div class="responsive1">
<div class="gallery1">
<a target="_blank" href="../facilities/wifi.htm">
<img src="../images/airlines/china_airlines_logo.png" alt="china airlines">
</a>
<div class="desc1">9 Air</div>
</div>
</div>
<div class="responsive1">
<div class="gallery1">
<a target="_blank" href="../facilities/wifi.htm">
<img src="../images/airlines/china_eastern_airlines.png" alt="China Eastern Airlines">
</a>
<div class="desc1">AirAsiaX</div>
</div>
</div>
<div class="clearfix"></div>

Answer 1

One way to tackle this is to set the following to class responsive1.
<style>
.responsive1{
padding: 0 6px;
width: 19.6%; // adjust your width accordingly base on your demand
display: inline-block; // behave as block elements inside, but inline elements outside, just like the behavior of characters
// no need to use float:left in this case
vertical-align: top;
}
</style>