How would you construct this?

[MonicaGeller (Marie Muenyong)]

Hi Friends,

In the process of building my first site and was wondering if anyone had advice on how to construct this (attached)

or if it’s even possible?

My initial thought is to create a grid with div blocks but not sure how to get the line in the center. Any advice would be greatly appreciated.

Thanks

---

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

[HammerOz (Hamish)]

Hi Marie

The simplest approach would be to use flexbox - horizontal on a parent container. Create two divs in there and in those add your text and image for each column. you might need to flex-vertical the column divs as well. The vertical line can be a div 1px wide / 100% high or use the flex alignment settings to stretch it. Place it between the two content divs.

[MonicaGeller (Marie Muenyong)]

Thanks Hamish, I’ll try that!
I discovered a way to do it with a grid and div blocks but your way sounds a lot more simplified

[Anon_User (George)]

HammerOz’s method is simple and effective, but you might want to use a grid with div blocks if you need to make the design responsive. i.e. on smaller screens you might want your grid to stack.

[sarahfrison (Sarah - Webflow Expert/mod)]

You could still get the blocks to stack @Anon_User, you just change the layout of the flexbox on smaller screens, no need for grid