Adding buttons below the content area of tabs that are routable

I am using AppLayout, and in the target of one of the SideNavItem i’m adding Tabs, followed by a series of buttons. The aim is that the buttons are always visible at the bottom of the screen, and that the content area of the tabs scrolls independently above it.

The class implementing it is basically this:

@PageTitle("With tabs")
@Route(layout = MainLayout.class)
@RoutePrefix("with-tabs")
@ParentLayout(MainLayout.class)
public class WithTabsView extends VerticalLayout implements RouterLayout, BeforeEnterObserver {

  public WithTabsView() {
    setHeightFull();
    RouteableTabs routeableTabs = new RouteableTabs();
    routeableTabs.add(new RouterLink("first tab", Tab1.class));
    routeableTabs.add(new RouterLink("second tab", Tab2.class));
    add(routeableTabs);
    HorizontalLayout horizontalLayout = new HorizontalLayout();
    horizontalLayout.add(new Button("Save"));
    horizontalLayout.add(new Button("Cancel"));
    horizontalLayout.add(new Button("Delete"));
    add(horizontalLayout);
  }

  @Override
  public void beforeEnter(BeforeEnterEvent event) {

    if (event.getNavigationTarget() == WithTabsView.class) {
      event.forwardTo(Tab1.class);
    }
  }
}

The RoutableTabs component is the one as explained in the vaadin cookbook: https://cookbook.vaadin.com/tabs-with-routes/a

As you can see in the screenshot, the buttons are shown above tabs. I think i can understand why this is, as at the moment when the tabs are created the content area they link to is not known yet? Should this be solved differently? When i use the standard Tabs component it works, as the setup is much simpler there. But I need tabs i can route to by URL individually.
image.png

Adding buttons below the content area of tabs that are routable