Column width within a stack. 2/3 & 1/3

Configuration Frontend
1

Hi all, quick one. I would like to take this button and make it only the 1/3 of the overall width of the card, but the word the other 2/3. How can I achieve this?

image

I tried this on the header, but it did the opposite of what I wanted (ie 1/3 then 2/3). Where did I go wrong? Thanks!

image

type: custom:mod-card
card_mod:
  style:
    hui-horizontal-stack-card $: |
      hui-button-card:nth-of-type(1) {
        flex-grow: 2 !important; 
      }
      hui-button-card:nth-of-type(2) {
        flex-grow: 1 !important; 
      }
card:
  type: horizontal-stack
  cards:
    - type: custom:mushroom-title-card
      title: Bedroom
    - type: button
      entity: light.bedroom
      icon_height: 40px
      show_name: false
      tap_action:
        action: toggle
        show_state: false
2

nth-of-type 0 and 1, not 1 and 2

3

Thanks Petro, but that just seems to take it back to default 50/50. I’m not sure what I’m messing up here!

image
image978×244 10.4 KB

4

For ease of use try layout card.

type: custom:layout-card
layout_type: custom:grid-layout
layout:
      grid-template-columns: 60% 40%
      margin: 0px 0px 0px 0px
cards:
      - type: entities
        entities:
          - entity: light.bathroom_lights
      - type: button
        tap_action:
         action: toggle
        entity: light.kitchen_lights

image
image830×250 6.02 KB

Works well with stack-in-card too.

5

Genius, that did it! Thank you
image