How to set images on the same lower level (using only css no js)?

Question

Thanks for your answers in advance.

I know how to create an effective product grid if all images have the same height and the same length of the header, using only the properties of the css, such as flex displayand flex-end alignfor children, but when I use the image (several heights) and the name of each image (different length for each), I get this problem:

HTML code

<div class="imgContainer">
    <div class="imgChild row-eq-height">
        <div class="img-slider-parent">
            <div class="container-slider">
                <button class="btn green-btn" type="button">Voir</button>
            </div>
            <img class="imgSlider" src="https://placebear.com/200/400">
        </div>
        <div>
            <div class="product-title">title1</div>
            <div class="product-number">category1</div>
        </div>
    </div>
    <div class="imgChild row-eq-height">
        <div class="img-slider-parent">
            <div class="container-slider">
                <button class="btn green-btn" type="button">Voir</button>
            </div>
            <img class="imgSlider" src="https://placebear.com/350/400">
        </div>
        <div>
            <div class="product-title">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>
            <div class="product-number">category1</div>
        </div>
    </div>
    <div class="imgChild row-eq-height">
        <div class="img-slider-parent">
            <div class="container-slider">
                <button class="btn green-btn" type="button">Voir</button>
            </div>
            <img class="imgSlider" src="https://placebear.com/300/400">
        </div>
        <div>
            <div class="product-title">yyyyyyyyyyyyyyyyyyyyyyyyyyyyy</div>
            <div class="product-number">category1</div>
        </div>
    </div>
    <div class="imgChild row-eq-height">
        <div class="img-slider-parent">
            <div class="container-slider">
                <button class="btn green-btn" type="button">Voir</button>
            </div>
            <img class="imgSlider" src="https://placebear.com/200/250">
        </div>
        <div>
            <div class="product-title">title1</div>
            <div class="product-number">category1</div>
        </div>
    </div>
    <div class="imgChild row-eq-height">
        <div class="img-slider-parent">
            <div class="container-slider">
                <button class="btn green-btn" type="button">Voir</button>
            </div>
            <img class="imgSlider" src="https://placebear.com/200/200">
        </div>
        <div>
            <div class="product-title">title1</div>
            <div class="product-number">category1</div>
        </div>
    </div>
    <div class="imgChild row-eq-height">
        <div class="img-slider-parent">
            <div class="container-slider">
                <button class="btn green-btn" type="button">Voir</button>
            </div>
            <img class="imgSlider" src="https://placebear.com/200/100">
        </div>
        <div>
            <div class="product-title">title1</div>
            <div class="product-number">ooooooooooooooooooooooooooooo</div>
        </div>
    </div>
</div>

CSS code

.imgContainer {
    width: 100%;
    /* background-color: red;*/
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.imgChild {
    width: 20%;
    padding: 10px;
    float: left;
    flex-direction: row;
    align-self: flex-end;
    background-color: red;
}

.imgChild > img {
    width: 100%;
}

.product-title,
.product-number {
    word-wrap: break-word;
}

.product-title {
    font-weight: 600;
    padding-top: 15px;
}


.img-slider-parent {
    position: relative;
    cursor: pointer;
}

.container-slider {
    display: none;
}

.green-btn {
    display: block;
    background: #3DCFB2;
    border-radius: 19px;
    padding: 4px;
    padding-left: 35px;
    padding-right: 35px;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    color: white;
}
.imgSlider {
    width: 100%;
}

You can also find this code in jsfiddle to play with: http://jsfiddle.net/ukgqrysr

Thanks again for your answers.

Answer 1

, , , , - ( ) , . text , , "button".

, :

.imgChild.row-eq-height > div:nth-child(2) {
    height: 55px;
}

3 .

: http://jsfiddle.net/fmfouubk/1/