A Simple Grid (Not so simple)

I’m using GeneratePress + GenerateBlocks and I’m stuck on what should be a simple 2-column layout that behaves properly on mobile.

What I’m trying to build

I want a reusable pattern / section where:

Desktop / Tablet:

Left: an image

Right: a black box with white text (e.g. “Related:” + some text)

The text on the right is vertically centred and left-aligned.

Mobile:

I still want image left, text right (no stacking).

The text has more width than the image (e.g. 30% image / 70% text or similar).

The text should be readable and not “scrunched up” into a narrow strip.

The text stays vertically middle, horizontally left.

This is the original problem that made me move away from the core Media & Text block. On mobile, Media & Text either stacks (which I don’t want) or, when “stack on mobile” is disabled, the text is squashed in a tiny column.

So I rebuilt it using GenerateBlocks, but I keep hitting new issues every time I fix one.

At one point this was a GB Grid block, but following advice I switched it to a Container with Display: Flex to get them side-by-side.

The GeneratePress Grid block was an absolute nightmare, It stacked and would never go side-by-side. I even spoke with C GPT for over an hour just simply trying to get the grid to have two blocks side-by-side, one on the left, one on the right. We both had to give up in the end LOL

So currently:

Outer Container:

Display: Flex

Flex Direction: Row

Flex Wrap: No wrap

Align Items: Center (for vertical centring)

Left Container: image

Right Container: text

Visually this now works on desktop: image left, text right, text middle/left.
On mobile, they do stay side-by-side, which is good, but the width and spacing behaviour is where it keeps going wrong.

Problems I’m running into

When I use Flex Basis for widths on mobile (e.g. 30% / 70%)

If the right column is Display: Flex, I can get the widths closer to what I want, but I start fighting horizontal centring again and lose the consistent “middle + left” look.

If I change the right column to Display: Block to fix the alignment, Flex Basis stops behaving as expected (the 70% column doesn’t visually act like 70%).

When I try using Width instead of Flex Basis per breakpoint

I’ve tried setting widths (e.g. 50/50 on desktop & tablet, 30/70 on mobile) on the two inner Containers while leaving the parent as Flex row / no wrap.

Sometimes the widths are honoured, sometimes not. It’s very easy to end up with cramped text again or odd behaviour on one breakpoint.

Alignment tug-of-war

To get the text in the right column to sit vertically middle but left-aligned, I’ve had to juggle:

Parent flex alignment (Align Items, Justify Content)

Child container display (Flex vs Block)

Content / text alignment on the container

Text alignment on the Paragraph / Heading blocks

It’s very easy for one setting to undo another, especially when trying to give the text column more width on mobile.

In short: every time I solve one thing (stacking, centring, etc.), something else breaks: either the widths don’t behave, or the text re-centres, or it becomes cramped again.

What I’m asking for

Could someone please give me a clear, recommended block structure and exact settings for this layout, ideally as a pattern I can reuse?

Specifically:

Should the outer “row” be:

A GB Grid block using CSS Grid?

Or a Container set to Display: Flex?

What’s the official recommended way in GP/GB for a simple two-column hero/row like this?

For the outer row:

What should Display / Flex / Grid settings be on Desktop, Tablet, and Mobile to keep columns side-by-side and vertically centred?

For the two inner columns:

What should their Display be (Block vs Flex)?

Should I be controlling width with Width or Flex Basis, and what values would you recommend for:

Desktop (50/50)

Tablet (50/50)

Mobile (e.g. 30/70 or 35/65 so the text doesn’t feel squashed)

For the right text column:

How should I set vertical centring and left alignment so it’s:

Always vertically middle within the row

Always left-aligned inside the column

Which exact controls should I use (Align Items, Justify Content, Content Alignment, Text Align) so they don’t fight each other?

If you can describe the exact configuration (outer block type, display mode, flex/grid settings, widths per breakpoint, and alignment settings), or even share a minimal GB export for this pattern, that would be ideal. I’m happy to rebuild it from scratch the “GP approved” way, I just need a reliable, canonical setup that:

Keeps image left / text right on all breakpoints

Keeps text vertically centred and left-aligned

Avoids the cramped/“scrunched” feel on mobile by giving the text more width than the image

Thanks in advance.