Align elements to both top AND bottom in flexbox

Hey guys

I’m trying to figure out how to make the following alignment happen in flexbox (i.e. I want the dates are aligned-top, the headings are aligned top, and the images are aligned bottom.

This is the closest I’ve been able to get:

I can’t figure out how to make the headings align. Any help would be appreciated!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi @bugsyb,

Use more <div>s ! :smile:
If you’ll put both top elements in 1 <div> they will join together at the top and the image will be a the bottom.

But these items are two separate items in collections. So how can I put them both into the same div?

Maybe I did not understand you, can you try to rephrase? or even better - show an example?

So I have two blog posts (they’re both from a collection).

If these were not collection items, I know I could put both titles into a div, and then align-top.

However, since they are both collection items, I’m not sure how I would put both titles into a div.

Does that make sense?

Can you edit the photo you uploaded in paint or photoshop and place all elements as you want them to be?

It should already be in the original post: The first photo is how I want it to be (i.e. the title and date are aligned at the top, and the picture is aligned at the bottom.

The second photo is what i’ve been able to get in Webflow (i.e. the title is centred) Does that make sense?

Then this is the solution…

You can put 2 CMS elements inside a div. If you share a read only link I will be able to record a video for you.

@avivtech Sorry for the confusion, I think I’m a little lost on how to do this.

Here’s the read only link https://preview.webflow.com/preview/alberts-marvelous-project-e7a374?utm_medium=preview_link&utm_source=dashboard&utm_content=alberts-marvelous-project-e7a374&preview=423f0b0d96297ca3ef37efb2904f5d38&mode=preview

Thanks a lot for the help, I really appreciate it!

No worries. We’ll figure it out :smiley:

https://www.loom.com/share/9fb2809bd1e94ed7873f08e1727f314b

1 Like

@avivtech ohhh I see what you mean. Okay that makes sense now. Thanks a lot!

1 Like