I’m trying to get my blocks to display inline and have a consistent height regardless of the amount of text inside them. I’ve got them lined up next to each other, but I can’t figure out how to make sure they all have the same height.
Here's the HTML structure:
<div class="article_block">
<div class="article_block_content">
<div class="article_block_content_left">
<img class="article_image" alt="<%= headline %>" title="<%= headline %>" src="<%= media_path %>"/>
</div>
<div class="article_block_content_right">
<h5 class="article-tag"><%= category.name %></h5>
<h2 class="article-title"><%= headline %></h2>
<h4 class="article-subtitle">This is the future home of the article headline. I hope this makes you want to read the article.</h4>
</div>
</div>
</div>
And here's the CSS styling:
.article_block {
width: 33%;
display: inline-flex;
.article_block_content{
margin: 10px;
height: inherit;
.article_block_content_left {
}
.article_block_content_right {
padding: 20px;
.article-tag {
text-align: center;
color: #7d8a8f;
text-transform: capitalize;
font-size: 14px;
font-family: 'Open Sans';
padding-top: 15px;
}
.article-title {
text-align: center;
font-family: 'Merriweather';
color: #333;
}
.article-subtitle {
text-align: center;
font-family: 'Merriweather';
font-style: italic;
color: #464849
}
}
}
}
Check out what’s currently happening in the screenshot below: https://i.sstatic.net/WePM7.png