How to get sub-menus to stay on the right side of a base menu?

Question

I have a dynamically generated (in Angular) menu and sub menu items with a nested call to the same component. <div> elements create the container and also each menu item. I have some variables with 'V' and 'H' values that allow me to position the menu items Horizontally or Vertically by dynamically creating classes ending by H or V character - these are the css classes:

.menuContainer-V {
    display: table;
}
.menuContainer-H {
    display: inline-table;
}
.menuItemsContainer-H {
    display: flex;
    float: left;
    flex-wrap: wrap;
}

That is all. (There is no class: "menuItemsContainer-V" because <div> items align naturally).

Here is what I would like to the layout to be:

"Menu A" will have class of: "menuContainer-V".
"Menu B" and all other menus will have class of: "menuContainer-H"
and the containers of their items - class: "menuItemsContainer-H".

At this time this works OK with the classes I specified above - EXCEPT - when the horizontal menu (e.g. "Menu C" has more items to reach the right edge of the view, it will jump to the left edge of the view - below "Menu A". Also, if more menus are produced, when they reach the bottom of "Menu A", they jump below "Menu A".

How can I get all other menus (Menus B, C, D, etc ...) stay on the right side from "Menu A" and never go under it?

Please remember that the component is called recursively (from itself) for each menu, so the container and its content (each menu and items) are re-generated dynamically, so that is the tricky part here from the CSS prospective.

Here is the template (HTML) code:

    <!--
        This is the first/base/root or the next selected switchboard menu.
        If it has .subMenuItems[] - ynBaseItemHasSubMenus,
        its sub-menu-items are the items/buttons of the menu
    -->
    <div [class]="swbPosClass"
        [style.margin-top]="swbMarginTop"
        [style.margin-left]="swbMarginLeft">

        <!-- container of one given menu - including title -->
        <div *ngIf="baseMenuItem" 
                [class]="menuContainerClass">

            <!-- This is the header/title of the menu - comes from:
                baseMenuItem.displayName -->
            <div *ngIf="showMenuTitle && baseMenuItem.displayName"
                        [class]="headerClass"
                        (click)="clearChild()">
                <!-- <span>{{baseMenuItem.displayName}} - L: {{level}}, {{menuPos}}</span> -->
                <span>{{baseMenuItem.displayName}}</span>
                <!-- This is a link/small icon to menu options -->
                <span class="menu-icon" (click)="openSwbOptionsDialog()">&#10702;</span>
            </div>
            <!-- Base container for menu items - they come from .subMenuItems[] 
                This div serves as container for the Tree menu items
                and for the NON-tree menus this div allows this css:
                    .menuContainer-V { display: table;   }
                display table properly - items are NOT stretched accross the screen,
                instead, all items are sized equally to the width of the item
                with longest content. 
            -->
            <div *ngIf="ynBaseItemHasSubMenus">


                <!-- Menu items container (for items without title)
                    arrange the menu items per the specified layout - H, V -->
                <div [class]="menuItemsContainerClass">
                    <!-- menu items   temp use: class="tmp4" -->
                    <div *ngFor="let item of baseMenuItem.subMenuItems; index as itemIx"
                                [class]="menuItemClasses"
                                (click)="onItemSelected(item)">
                        <mat-icon *ngIf="item.iconName"> {{item.iconName}} </mat-icon>
                        {{item.displayName}}
                    </div>

                </div>
            </div>
            <!-- doc:
                routedOutletPos:  Position options for the  menu (item's) target pages
                    1 - pages are displayed below or right from the last sub-menu,
                        according to the values of: menuPositioning.
                        The switchboard menus are remain shown / visible.
            -->
            <div *ngIf="isRoutedItem && routedOutletPos === 1">
                <router-outlet></router-outlet>
            </div>

        </div>
    </div>

    <!-- doc:
        For H or V (horizontal/vertical menus)
        while we have sub-menu items we create sub-menus;
        nested / recursive sub-menus based on users selection in prev. level item.
        DANGER !!! DO NOT REMOVE: *ngIf="ynRecurse"
        IT WOULD CAUSE ENDLESS LOOP - RESOURCES DEPLETED DANGER / BROWSER/SYSTEM CRASH
    -->
    <!-- <div *ngIf="ynRecurse" [class]="swbPosClass"> -->
        <libtw-switchboard-a01 *ngIf="ynRecurse"
            [baseMenuItem]="selectedItem" 
            [ynRecurse]="false"
            [level]="level">
        </libtw-switchboard-a01>
    <!-- </div> -->


    <!-- doc:
    routedOutletPos:  Position options for the  menu (item's) target pages
        2 - pages are displayed below the entire menu structure
            - below all sub-menus.
            The switchboard menus remain shown / visible.
    -->
    <div *ngIf="isRoutedItem && routedOutletPos === 2">
        <router-outlet></router-outlet>
    </div>