After conducting extensive research on the internet and exploring various Stack Overflow questions, I could not find a solution to my problem...

MAIN CONCEPT:
My challenge involves creating dynamic divs within the body of my webpage, each containing content sourced from a database. The number of divs can vary - it could be 3, 10, or even 32. These divs act as thumbnails, with varying content heights ranging from 4 lines to 8 lines. However, all these divs must have equal height. Currently, the layout looks like this: https://i.sstatic.net/g2qPh.png

WHAT I REQUIRE
As depicted in the image above, the "Category 1" and "Category 2" labels should always be at the bottom, irrespective of the content above them. By making some adjustments to the layout, you can see what I'm aiming for here: https://i.sstatic.net/N7l3U.png

I've attempted various approaches such as absolute and relative positioning, using display properties, setting 'bottom' values to 0px... but none of them have worked. Here's my current code (keep in mind that the content is dynamically generated), please review it and provide assistance:

HTML/JS:

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

<scrip>
                    var courses = func.Courses;
                    var courseContainer = $("#container-courses");

                    for (var i = 0; i < courses.length; i++) {
                        var course = courses[i];       
                        var singleCourseContainer = document.createElement("div");
                        singleCourseContainer.addClass("web-col-responsive container-div-course");
                        courseContainer.append(singleCourseContainer);

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

                        var courseImg = document.createElement("img");
                        courseImg.addClass("img-course-thumbnail img-responsive");
                        courseImg.onclick = this.ClickCourseCommand.bind(this, course);
                        courseImg.src = shell.Host + "/content/" + course.Image;

                        testDiv.append(courseImg);

                        var btnDescCourse = document.createElement("span");
                        btnDescCourse.onclick = this.ClickCourseCommand.bind(this, course);
                        btnDescCourse.addClass("course-title");
                        btnDescCourse.innerHTML = course.Description;
                        testDiv.append(btnDescCourse);

                        var modulesDiv = document.createElement("div");
                        modulesDiv.addClass("NOTHING");
                        modulesDiv.style.display = "inline-block";
                        testDiv.append(modulesDiv);


                        for (var y = 0; y < course.Modules.length; y++) {
                            var module = course.Modules[y];

                            var btnModuleDescription = document.createElement("span");
                            btnModuleDescription.addClass("col-xs-12 course-module-description");
                            btnModuleDescription.onclick = this.ClickModuleCommand.bind(this, course, module);
                            btnModuleDescription.innerHTML = module.Title;
                            modulesDiv.append(btnModuleDescription);
                       }
                        singleCourseContainer.append(testDiv);
                        var categoryCourseContainer = document.createElement("div");
                        categoryCourseContainer.addClass("container-category-course");                    

                        for (var j = 1; j < 3; j++) {
                            var categoryCourse = document.createElement("span");
                            categoryCourse.addClass("span-category-course");
                            categoryCourse.innerHTML = " Category " + j; 
                            categoryCourseContainer.append(categoryCourse);
                        }
                        singleCourseContainer.append(categoryCourseContainer);
</script>

CSS:

.web-col-responsive {
    width: 20%;
}

    .course-title {
        font-size: 20px;
        font-weight: bold;
        padding: 5px;
        background-color: #006063;
        border-bottom: 2px solid #006063;
        border-top: 2px solid #006063;
        color: white;
        display: block;
        width: 100%;
    }

    .course-module-description {
        font-size: 13px;
        color: black;
        padding: 5px;
        font-weight: bold;
        margin-bottom: 0px;
        -webkit-transition-duration: 0.4s;
        -moz-transition-duration: 0.4s;    
    }

    .container-geral-courses {
        width: 100%;
        display: inline-flex;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
    }

    .img-course-thumbnail {
        height: 140px;
        width: 100%;
    }

    .container-category-course {
        width: 100%;
        text-align: left;
    }

    .span-category-course {
        font-size: 11px;
        padding: 4px;
        color: #404040;
        -webkit-transition-duration: 0.4s;
        -moz-transition-duration: 0.4s;
    }

    .container-div-course {
        margin: 10px;
        border: 1px solid #006063;
        border-radius: 3px;
        box-shadow: 4px 4px 6px #8f8f8f;
        padding: 0;
        -webkit-transition-duration: 0.4s;
        -moz-transition-duration: 0.4s;
    }

To enhance readability, here's an image depicting the HTML structure: https://i.sstatic.net/XDmlY.png