Horizontal layout not working on custom layout card - no idea why

Configuration Frontend
,
1

I would like the cards to stack horizontally and then control the column width and other attributes for each stack, so using the custom:layout-card but the cards are stacking vertically even though I have specfied the layout to be horizontal.

Here is the yaml code I am tinkering with:

title: Home
#panel: true
icon: mdi:home-modern
theme: iso-dark-mode
cards:
  - type: custom:layout-card
    layout: horizontal
    #column_width: 600px
    cards:
      - type: custom:layout-card
        cards:
          - type: markdown
            content: >
              # <img width="30" height="30" src='/local/icon/light-on.jpg'
              style='vertical-align:middle' /> Navigation
          - type: custom:button-card
            template: navigation
            name: Lights
            icon: mdi:light-switch
            tap_action:
              action: navigate
              navigation_path: /lovelace-lights/
            variables:
              path: Lights
          - type: custom:button-card
            template: navigation
            name: Cast Devices
            icon: mdi:cast-connected
            tap_action:
              action: navigate
              navigation_path: /lovelace-tablet/cast
            variables:
              path: Lights
          - type: custom:button-card
            template: navigation
            name: Cast Devices
            icon: mdi:cast-connected
            tap_action:
              action: navigate
              navigation_path: /lovelace-tablet/cast
            variables:
              path: Lights
      - type: custom:vertical-stack-in-card
        layout: vertical
        cards:
          - type: markdown
            content: >
              # <img width="30" height="30" src='/local/icon/light-on-1.jfif'
              style='vertical-align:middle' /> Currently Active
          #Lights
          - type: entity-filter
            entities:
              - entity: light.front_flood_lights
                name: Flood Lights
                icon: mdi:wall-sconce
                show_state: false
                tap_action:
                  action: toggle

here is the result:

Inked2021-01-03 07_40_09-Tablet - Home Assistant_LI
Inked2021-01-03 07_40_09-Tablet - Home Assistant_LI782×1794 207 KB

How do I get to show the two cards (i.e: Navigation & Currently Active) next to each other and not below as it is now?

2

I have the same issue. Did you find a solution ?

3

Well I moved on and created other dashboards without the need for this.

But now that we have sections with the latest update this issue is pretty moot. sections is extremely versatile. Give that a try.

4

Yup, you are right. Section is the new way to go.
Thx for bringing it up.