Align items to bottom of container without tables?

Question

I want to create a sort of slider/carousel and since the items have different heights, i want to align them to the bottom of the container. As of now, this is done using tables, but of course since i want my thing to also be responsive i can't allow tables. My first thought was using absolute positioning but that obviously doesn't work since the elements do need to occupy a space after all. What do you suggest?

the HTML :

<div class="categories-wheel">
        <div class="container">
            <div class="categories-wheel__arrow categories-wheel__arrow--left">
                <span class="middle-vertical-align-helper"></span><!--
                @fix: no whitespace allowed between span and i tags
                --><i class="icon icon-thin-chevron-left"></i>
            </div>


            <div class="categories-wheel__arrow categories-wheel__arrow--right">
                <span class="middle-vertical-align-helper"></span><!--
                @fix: no whitespace allowed between span and i tags
                --><i class="icon icon-thin-chevron-right"></i>
            </div>

            <div class="categories-wheel__entries">

                <div class="categories-wheel__entries__entry">
                    <img class="categories-wheel__entries__entry__image" src="/resources/images/products/baterie_categorie_green.png" alt="" />
                    <span class="categories-wheel__entries__entry__name"> Green </span>
                </div>

                <div class="categories-wheel__entries__entry">
                    <img class="categories-wheel__entries__entry__image" src="/resources/images/products/baterie_categorie_agm.png" alt="" />
                    <span class="categories-wheel__entries__entry__name"> AGM </span>
                </div>

                <div class="categories-wheel__entries__entry">
                    <img class="categories-wheel__entries__entry__image" src="/resources/images/products/baterie_categorie_forte.png" alt="" />
                    <span class="categories-wheel__entries__entry__name"> Forte </span>
                </div>

                <div class="categories-wheel__entries__entry">
                    <img class="categories-wheel__entries__entry__image" src="/resources/images/products/baterie_categorie_terra.png" alt="" />
                    <span class="categories-wheel__entries__entry__name"> Terra </span>
                </div>

                <div class="categories-wheel__entries__entry">
                    <img class="categories-wheel__entries__entry__image" src="/resources/images/products/baterie_categorie_moto.png" alt="" />
                    <span class="categories-wheel__entries__entry__name"> RBX </span>
                </div>

            </div>
        </div>
    </div>

the CSS:

/*
 * CATEGORIES WHEEL
 * ============================================== */

.categories-wheel {
    height                      : 270px;
    padding                     : 30px 10px;
    background                  : #ffffff;
    text-align                  : center;
}

.categories-wheel__arrow {
    display                     : inline-block;
    height                      : 100%;
    padding                     : 0 10px;
    font-size                   : 6em;
    color                       : #cccccc;
    line-height                 : 240px;
}

.categories-wheel__arrow:hover {
    cursor                      : pointer;
    color                       : #b1b1b1; 
}

.categories-wheel__arrow--left {
    float                       : left;
}

.categories-wheel__arrow--right {
    float                       : right;
}

.categories-wheel__entries {
    display                     : table;
    margin                      : 0 auto;
}

.categories-wheel__entries__entry {
    display                     : table-cell;
    vertical-align              : bottom;
    padding                     : 0 10px;
}

.categories-wheel__entries__entry:hover {
    cursor                      : pointer;
}

.categories-wheel__entries__entry:hover .categories-wheel__entries__entry__name {
    color                       : #ed161c;
}

.categories-wheel__entries__entry:hover .categories-wheel__entries__entry__image {
    animation                   : zoomInOut 0.2s ease;
}


.categories-wheel__entries__entry__name {
    display                     : block;
    width                       : 100%;
    margin-top                  : 10px;
    text-align                  : center;
    font-size                   : 2em;
    font-weight                 : 500;

    transition                  : color 0.5s ease;
    -webkit-transition          : color 0.5s ease;
}

and how the situation looks like as of now: http://puu.sh/ndu0y/baf72d9132.jpg

Answer 1

I would use a bootstrap responsive panel, like this... https://goo.gl/hRXG5M Tell me if you want something different done, as I can help. What sort of solution do you want?

PS: you need to import the relevant scripts for this solution:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Answer 2

Flexbox can do that:

.parent {
  width: 80%;
  display: flex;
  justify-content: space-around;
  margin: 1em auto;
}
.child {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border: 1px solid grey;
}

<div class="parent">
  <div class="child">
    <img src="http://lorempixel.com/image_output/abstract-q-c-150-100-9.jpg" alt="" /><span>Title</span>
  </div>
  <div class="child">
    <img src="http://lorempixel.com/image_output/city-h-c-100-200-3.jpg" alt="" /><span>Title</span>
  </div>
  <div class="child">
    <img src="http://lorempixel.com/image_output/sports-h-c-50-100-1.jpg" alt="" /><span>Title</span>
  </div>
  <div class="child">
    <img src="http://lorempixel.com/image_output/city-h-c-100-200-3.jpg" alt="" /><span>Title</span>
  </div>
  <div class="child">
    <img src="http://lorempixel.com/image_output/city-h-c-100-200-3.jpg" alt="" /><span>Title</span>
  </div>
</div>

Codepen Demo

Answer 3

As @AndreiGheorghiu said you should add a Minimal complete example to have an accurate answer. I would use vertical-align:bottom on your categories-wheel__entries with a height of 100%, so your div will take the full height of his container and the images will be at the bottom.