Hey there! I need some help with a markup issue. I want to replicate the layout shown in this picture. The challenge is ensuring that the grey line between the upper and lower sections of cards on the same row are aligned perfectly. In the image, you can see that the grey line shifts due to text overflow. We're allowed to utilize both flexbox and grid layouts for this task.
<div class="cat-cards">
<div class="cat-card">
<img src="">
<div class="short-description">
short
</div>
<div class="long-description">
long
</div>
</div>
<div class="cat-card"></div>
<div class="cat-card"></div>
</div>
I have an initial concept as displayed above, but feel free to suggest any alternatives using grid and flex properties.
.cat-cards
{
display: flex;
}
.cat-card
{
display: grid;
grid-template-areas: 'image' 'short'
'long' 'long';
}
.cat-card img
{
grid-area: image;
}
.cat-card .short-description
{
grid-area: short;
}
.cat-card .long-description
{
grid-area: long;
}