HTML - Position footer element in a table row with flexbox

Question

I'm trying to bottom-align my element (.table-footer) inside in a table with flexbox. I would like table-footer to stick to the bottom of my .table-row like that:

I tried with:

.table-footer {
  background-color: grey;
  bottom: 0;
}

.table-row {
    display: flex;
    flex-direction: column;
}

But what I'm getting is:

I tried with position absolute and bottom 0 but it's not working well... can you advise me where is the problem? Thanks :)

You can try the code here: https://jsfiddle.net/a5dubgfj/

Answer 1

You could do something like this

.table-footer {
  background-color: grey;
  bottom: 0;
}

.table-row {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 108px; //the height of the table row you have so far
}

there is probably better way of defining the height, but this worked for me

here's the the jsfiddle link: https://jsfiddle.net/8ubm96tk/