Custom:button-card: how-to align text name: and label:

Hi all,
I’ve created a card in my dashboard which shows if there are any outside doors left open.
it is using an entity: group.externe_deuren
But in the card i would like to align the fields name: and label: but i have no idea how to do this.
This is my card:


And this is the code for the card:

type: custom:button-card
color_type: icon
name: Deuren
entity: group.externe_deuren
layout: icon_label
label: |
  [[[
    if (states['group.externe_deuren'].state === "on")
      return "Gesloten";
    else if (states['group.externe_deuren'].state === "off")
      return "Open";
  ]]] 
show_label: true
show_name: true
styles:
  card:
    - height: 100px
state:
  - value: 'off'
    icon: mdi:door-closed
    color: light-blue
  - value: 'on'
    icon: mdi:door-open
    color: red

I looked at the example in https://github.com/custom-cards/button-card#playing-with-label-templates
There at Templates Support :: Playing with label templates, the right button, is an example of what i would like to use…
Any help is much appreciated. Kind regards, Bert

Not quite sure if this fixes your card configuration in particular, but I have added the following to each card:

styles:
  name:
    - justify-self: start
    - padding-left: 10px
  label:
    - justify-self: start
    - padding-left: 10px

However, my card design is a bit different I think, because I configured this, i.e. state at the top, icon in the middle, and then two lines at the bottom with name and label.

styles:
  grid:
    - grid-template-areas: '"s" "i" "n" "l"'
    - grid-template-rows: min-content 1fr min-content min-content
    - grid-template-columns: 1fr