Javascript 动态大小相同的div/列中的固定页脚

我一直在互联网上寻找答案，也在另一个问题上寻找答案，但没有一个能帮到我

主旨：
我将有在体内是动态的div（内容将来自数据库），可以是3 div，可以是10 div，可以是32 div。。。这些div是一种缩略图，其中的内容也将是动态的，一个div可以有4行内容，另一个div可以有8行内容，但都需要具有相同的高度。现在它是这样显示的：

我需要什么
正如您在上图中看到的，有“Categoria 1”和“Categoria 2”，它们需要始终位于底部，不管上面的内容有多少行，通过对图像进行一些编辑，您可以在这里看到我需要的内容：

我尝试了很多东西，比如绝对位置和相对位置，显示，底部：0px。。。没有一个有效。。。这是我的实际代码（请记住，内容是动态的），请看一看并尝试帮助我：

HTML/JS：

<div id="container-cursos" class="center-block container-geral-cursos">
</div>

<scrip>
                    var cursos = func.Cursos;
                    var containerCursos = $("#container-cursos");

                    for (var i = 0; i < cursos.length; i++) {
                        var curso = cursos[i];       
                        var containerCursoUnico = document.createElement("div");
                        containerCursoUnico.addClass("web-col-responsive container-div-curso");
                        containerCursos.append(containerCursoUnico);

                        var divteste = document.createElement("div");

                        var imgCurso = document.createElement("img");
                        imgCurso.addClass("img-curso-thumbnail img-responsive");
                        imgCurso.onclick = this.ClickCursoCommand.bind(this, curso);
                        imgCurso.src = shell.Host + "/content/" + curso.Imagem;

                        divteste.append(imgCurso);

                        var btnDescCurso = document.createElement("span");
                        btnDescCurso.onclick = this.ClickCursoCommand.bind(this, curso);
                        btnDescCurso.addClass("curso-titulo");
                        btnDescCurso.innerHTML = curso.Descricao;
                        divteste.append(btnDescCurso);

                        var divmodulos = document.createElement("div");
                        divModulos.addClass("NADA");
                        divModulos.style.display = "inline-block";
                        divteste.append(divModulos);


                        for (var y = 0; y < curso.Modulos.length; y++) {
                            var modulo = curso.Modulos[y];

                            var btnDescricaoModulo = document.createElement("span");
                            btnDescricaoModulo.addClass("col-xs-12 curso-modulo-descricao");
                            btnDescricaoModulo.onclick = this.ClickModuloCommand.bind(this, curso, modulo);
                            btnDescricaoModulo.innerHTML = modulo.Titulo;
                            divModulos.append(btnDescricaoModulo);
                       }
                        containerCursoUnico.append(divteste);
                        var containerCategoriaCurso = document.createElement("div");
                        containerCategoriaCurso.addClass("container-categoria-curso");                    

                        for (var j = 1; j < 3; j++) {
                            var categoriaCurso = document.createElement("span");
                            categoriaCurso.addClass("span-categoria-curso");
                            categoriaCurso.innerHTML = " Categoria " + j; 
                            containerCategoriaCurso.append(categoriaCurso);
                        }
                        containerCursoUnico.append(containerCategoriaCurso);
</script>

为了更容易阅读代码，下面是生成的HTML的图像：

---

您可以使用flex并将

页边距顶部：自动

下推到类别中。尝试添加以下代码：

.container-div-curso {
 display:flex;
 flex-direction:column;
}
.container-div-curso .container-categoria-curso {
  margin-top:auto;
}

---

你能给我们看看生成的html吗？我们帮不了你。好吧，我要编辑并发布生成代码的图像。我不敢相信我在互联网上或对我自己来说都没有找到这样的解决方案，现在看起来很容易。。。谢谢

.container-div-curso {
 display:flex;
 flex-direction:column;
}
.container-div-curso .container-categoria-curso {
  margin-top:auto;
}