3 replies

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>

KP-C

Kevin Powell - Community•3y ago•

3 replies

SchmediumXL

How to align border-bottom with variable length text?

<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>

How to align border-bottom with variable length text?

Similar Threads

How to align border-bottom with variable length text?

Similar Threads

Similar Threads

Similar Threads