Panels not displaying properly

Hi I am trying to created 2 panels, one as a sidebar and the other as a content panel but they are not displaying correctly. There is a huge white space between the 2 panels. Does anyone know how to fix this?

        HorizontalLayout mainlayout = new HorizontalLayout();
        mainlayout.setSizeFull();

        Panel sidepanel = new Panel();
        sidepanel.addStyleName(ValoTheme.PANEL_BORDERLESS);
        sidepanel.setHeight("100%");
        sidepanel.setWidth("20%");      

        Panel content = new Panel();
        content.addStyleName(ValoTheme.PANEL_BORDERLESS);
        content.setHeight("100%");
        content.setWidth("80%");
        
        mainlayout.addComponent(sidepanel);
        mainlayout.addComponent(content);

Replace these lines
sidepanel.setHeight(“100%”);
sidepanel.setWidth(“20%”);
content.setHeight(“100%”);
content.setWidth(“80%”);
by using
sidepanel.setSizeFull();
content.setSizeFull();

Now your panels only fill own “slot” partly. First one fills 20% and the second one 80%

https://vaadin.com/book/-/page/layout.settings.html

You must also set expand ratios to the main panel
mainlayout.setExpandRatio(sidepanel, 20f);
mainlayout.setExpandRatio(content, 80f);