Making columns in one row have the same height

[F43nd1r]

I have the following setup: I have two panels, which are displayed like this:

    ResponsiveLayout responsiveLayout = new ResponsiveLayout().withScrollable(true);
    ResponsiveRow row = responsiveLayout.addRow().withSpacing(ResponsiveRow.SpacingSize.SMALL, true).withMargin(ResponsiveRow.MarginSize.SMALL);
    row.addColumn().withComponent(panel1).withDisplayRules(12, 12, 6, 6);
    row.addColumn().withComponent(panel2).withDisplayRules(12, 12, 6, 6);

How can I make both panels have the same height (without knowing which one is bigger) if they are side by side, but not if they aren't?

I am facing the same issue. Looks like a bug. Currently only this workaround came to my mind:

• let the view to render as it is
• use the SizeReporter addon to get real height of the bigger panel (https://vaadin.com/directory/component/sizereporter)
• and set the same height on the smaller panel

[F43nd1r]

I've moved on from this to Vaadin flow, where responsive layouts are no problem anymore.