How to align name and state values to the left on custom button card?

I would like to have the name and state values aligned to the left, besides the icon.
Now, as you can see in my screenshot it’s aligned to the right.

This is the code I use for all items:

type: custom:button-card
entity: binary_sensor.motion_sensor_brievenbus_motion
name: 'post:'
show_state: true
icon: mdi:email
styles:
  card:
    - height: 40px
    - background-color: rgba(0, 0, 0, 0)
    - border: 0px solid white
    - border-radius: 0px
    - padding: 0px 0px
  grid:
    - grid-template-areas: '"i n s"'
  img_cell:
    - justify-content: start
    - align-items: start
    - margin: none
  icon:
    - width: 40px
    - padding: 0px 45px
  name:
    - padding: 0px 0px
    - text-transform: lowercase
  state:
    - padding: 0px 5px
    - padding-right: 50px
    - text-transform: lowercase
state:
  - value: 'off'
    styles:
      card:
        - filter: opacity(70%)
      icon:
        - filter: grayscale(100%)

1 post - 1 participant

Read full topic