Kevin Powell - Community•10mo ago

How to align border-bottom with variable length text?

I have a 3 card/column layout using grid, where each card contains an image, title, and variable length text. I also have a border around just the title and text. (https://codepen.io/Jason-Cabreros-the-sasster/pen/JjzyYNm) Is there a way to stretch the border so they’re aligned at the bottom as well? I’d like to keep the images and descriptions together in one card:

<div>
    <img>
    <div>description</div>
</div>
<div>
    <img>
    <div>description</div>
</div>
<div>
    <img>
    <div>description</div>
</div>

<div>
    <img>
    <div>description</div>
</div>
<div>
    <img>
    <div>description</div>
</div>
<div>
    <img>
    <div>description</div>
</div>

vs.

<img>
<img>
<img>
<div>description</div>
<div>description</div>
<div>description</div>

<img>
<img>
<img>
<div>description</div>
<div>description</div>
<div>description</div>

3 Replies

Tok124 (CSS Nerd)•10mo ago

SchmediumXL•10mo ago

Ohhh, thank you so much!

Tok124 (CSS Nerd)•10mo ago

No problem 🙂

Gaming

Programming

How to align border-bottom with variable length text?