.mkdf-blog-list-holder .mkdf-blog-list {
position: relative;
width: 100%;
vertical-align: middle;
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
}
.mkdf-blog-list-holder .mkdf-bli-inner {
position: relative;
display: inline-block;
width: 100%;
vertical-align: middle;
height: 100%;
}
.mkdf-blog-list-holder .mkdf-bli-content {
position: static;
display: inline-block;
width: 100%;
vertical-align: middle;
box-sizing: border-box;
}
.mkdf-blog-list-holder .mkdf-post-read-more-button {
position: absolute;
display: inline-block;
width: 100%;
vertical-align: middle;
margin: 0;
bottom: 0;
left: 0;
}
.mkdf-blog-list-holder .mkdf-bli-inner {
position: relative;
display: inline-block;
width: 100%;
vertical-align: middle;
height: 100%;
padding: 0 0 30px;
}
.mkdf-normal-space .mkdf-outer-space .mkdf-item-space {
padding: 0 15px 40px;
margin: 0 0 30px;
}
might not be totally correct due to your classes but that’s basically how to do it.
Make your list flex and flex-wrap
make the inner div 100% height
make the div wrapping the button position static
make the button absolute
add bottom padding to the containers so the button never overlaps content