Responsive Layout

This is a horizontal layout ( red border ) and contains two form layouts ( blue border). I want to move second form layout next to the first in mobile views autotmatically. I added Flex Wrap to the parent HL which is moving the second layout down to the first in desktop also. How to have them adjusted automatically on the screen size?
image.png

with Flex wrap
image.png

Instead of HorizontalLayout, you could use FormLayout.

https://vaadin.com/docs/latest/components/form-layout

The reason it’s wrapping always is that by default the FormLayout’s width is 100%

(well, it’s a bit more complicated than that, but for all practical purposes let’s just say it’s 100%)

So you’ll have to specify some width to both FormLayouts so that they can fit side-by-side.

I was able to make them side by side in desktop view but not one after another in mobile view