Columns (beta) renders correctly in Gutenberg Editor but wrong on website

[Theremingenieur]

Describe the bug
See title

To Reproduce
Steps to reproduce the behavior:

1. Create a new Columns block with 2 columns.
2. Insert a single image block into the first column and pick a picture from the media library.
3. Insert alternating header and paragraph blocks in the second column.
4. Everything looks fine in the editor
5. Switch to preview
6. See that the second column is rendered BELOW the 1st column.

Expected behavior
The second column should show up on the right side besides the first column

Screenshots
Editor:

Website preview:

Desktop (please complete the following information):

• OS: macOS 10.13
• Browser: Safari & Firefox
• Gutenberg 3.1.0, WP 4.9.6, Twentyseventeen child theme

[chrisvanpatten]

Likely a duplicate of #5351, unless it previously worked for you in 3.0.1? If it worked in 3.0.1 but stopped working on 3.1, that could be a regression.

[Theremingenieur]

Had not tested this in 3.0.1. Found it already wrong this way in earlier releases, abondoned that for a few months and decided to give it a try with 3.1. Now surprised that the issue still exists. Am I the only one to experience that?

[chrisvanpatten]

@Theremingenieur no, definitely not the only one. #5351 has a lot of discussion about it, and #7234 is trying out a potential solution.

[Theremingenieur]

@chrisvanpatten Thank you for your time to reply. It looks like that pull request did not make it into 3.1 and I‘ll have to wait for a later release. Am a little surprised, though. Since everything renders correctly in the editor, I had not imagined that there were so many problems behind the front end rendering. I rather suspected a minor bug which would make just a div get lost between editor and front end and which could have been fixed easily.

[designsimply]

Thank you for the report! I'd like to close this as a duplicate of #5351 since it has work in progress.