I am building a dynamic dashboard. For instance, on the sidebar, if we select current, it will display a different group than if we choose the voltage. So I used the UI control to dynamically hide and show the groups. As far as layout is concerned this is the output of the layout.
I use the same functionality a lot... It can be a pain at times. The location of groups to display can be a bit unpredictable, NR will try and cram as much stuff as possible in as little space as possible, so things don't necessarily appear where you expect them, especially with a combination of differently sized groups.
I work around this feature by using some or all of the following:
I try and keep dynamic dashboard groups (the ones controlled with Ui-control show/hide) in a uniform size, or at least keep alternatively displayed group the same size.
I try to avoid using the "auto" size settings anywhere.
Within the dashboard groups, I remove unused spacers that might have been automatically generated by the layout tool or left behind when shifting things around manually, and I check the ones I need are the right size.
I split the dashboard in zones using groups containing a text node which is used as label for the area, the groups and node are manually set to the desired width, usually much wider than the dynamic groups that follow, this forces node-red to place them below.
Finally, there is also the option to set the default page width of the dashboard tab (i can't remember where that is, I think you need to dive in a css file somewhere).
My 2 pennies...
PS edit: So, looking at your layout, I think it might be worth trying to make the sidebar group the same height or taller than the the other elements
Thank you everyone for the help in my case it was just rearranging the nodes in layout. I don't why it happens but If the nodes are placed in the correct order//layout even then first reorder them and then bring them to a required order.