Card-Mod, set horizontal stack widths?

Configuration
1

I have Card-Mod installed. I wanted to create a horizontal stack, and set the left two items at 42% each, and the third (rightmost item) at 14%. But I cannot see how to do that with the examples at:

This is the UI at this time:
image

I tried this option

type: custom:mod-card
card_mod:
  style:
    hui-horizontal-stack-card $: |
      div#root > :first-child {
        width: 42%;
        flex: auto; 
      }
      div#root > :last-child {
        width: 16%;
        flex: auto; 
      }
card:

but that did nothing. Note that I have a vertical stack with a markdown at the top, then a horizontal stack with mushroom light card, mushroom fan card, and a button. Then there is another horizontal card with two entities.

If someone can point me in the right direction, that would be much appreciated.

To be clear, the light fan, and whoosh horizontal stack is the one that I want to set 42, 42, 16 on.
Cheers.

2

I figured out something that will work:
image

Hope this helps someone else.

type: vertical-stack
cards:
  - type: markdown
    content: <b><font color="Cyan" size="6">Sierra</font></b>
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-light-card
        entity: light.sierra_fan
        show_brightness_control: true
        name: Light
        card_mod: null
        style: |
          ha-card {
            width: 90%;
          }
      - type: custom:mushroom-fan-card
        entity: fan.sierra_fan
        show_percentage_control: true
        name: Fan
        icon_animation: true
        card_mod: null
        style: |
          ha-card {
            left: -18px;
            width: 169%;
          }
      - type: button
        name: Whoosh
        show_name: true
        show_icon: true
        tap_action:
          action: toggle
        entity: switch.sierra_fan_whoosh
        show_state: true
        icon_height: 20px
        card_mod: null
        style: |
          ha-card {
            left: 86px;
            width: 45%;
          }
1 Like
3

Alternatively you could user Layout Card and set it as a grid.