Custom fields position

Dashboard/Cards/Frontend
,
1

Hallo zusammen.

Ich habe mir eine custom:button-card mit 2 custom fields die unterhalb des Namens erscheinen:

custom_fields: temp: > [[[ return states['sensor.wozi_tur_wandthermostat_temperatur'].state + ' °C']]] hum: > [[[ return states['sensor.wozi_tur_wandthermostat_luftfeuchtigkeit'].state +' %' ]]].

grid:
    - grid-template-areas: "\"n btn1 btn2\" \"temp btn1 btn2\" \"hum btn1 btn2\" \"i btn1 btn2\""
    - grid-template-columns: 1fr min-content min-content min-content
    - grid-template-rows: min-content min-content min-content 1fr
    custom_fields:
    temp:
      - justify-self: start
      - font-size: 14px
      - opacity: "0.7"
      - padding-top: 10px
    hum:
      - justify-self: start
      - font-size: 14px
      - opacity: "0.7"

Im Moment erscheinen die beiden Felder vertikal unter dem Namen.

name
temp
hum

Ich möchte aber gerne, dass sie horizontal erscheinen

name
temp hum

Wie kann ich das ändern?

2 
custom_fields:
  temp: >
    [[[ return states['sensor.wozi_tur_wandthermostat_temperatur'].state + ' °C' ]]]
  hum: >
    [[[ return states['sensor.wozi_tur_wandthermostat_luftfeuchtigkeit'].state + ' %' ]]]

grid:
  grid-template-areas: 
    '"n n n" "temp hum hum" "i btn1 btn2"'
  grid-template-columns: 1fr min-content min-content
  grid-template-rows: min-content min-content 1fr

custom_fields:
  temp:
    - justify-self: start
    - font-size: 14px
    - opacity: "0.7"
    - padding-top: 10px
  hum:
    - justify-self: start
    - font-size: 14px
    - opacity: "0.7"
    - padding-top: 10px
3

Das funktioniert leider nicht.

Hier der komplette Code:

type: custom:button-card
name: Büro
icon: mdi:laptop
custom_fields:
  temp: >
    [[[ return states['sensor.wozi_tur_wandthermostat_temperatur'].state + '
    °C']]]    
  hum: >
    [[[ return states['sensor.wozi_tur_wandthermostat_luftfeuchtigkeit'].state
    +' %' ]]]
  btn1:
    card:
      type: custom:mushroom-chips-card
      chips:
        - type: template
          icon: mdi:wall-sconce-round
          tap_action:
            action: toggle
          entity: light.deckenventilator_lampe_rgb
          card_mod:
            style: |
              ha-card {
                --chip-background: {{ 'rgba(138, 205, 215, 1)' if is_state('light.deckenventilator_lampe_rgb', 'on') else 'rgba(255, 255, 0, 1)' }};
                padding: 5px!important;
                border-radius: 100px!important;
              }    
        - type: template
          icon: mdi:led-strip-variant
          tap_action:
            action: toggle
          entity: light.wozi_led_stripe_fenster
          card_mod:
            style: |
              ha-card {
                --chip-background: {{ 'rgba(223, 130, 108, 1)' if is_state('vacuum.lucy', 'on') else 'rgba(223, 130, 108, 0.3)' }};
                padding: 5px!important;
                border-radius: 100px!important;
              }     
        - type: template
          icon: mdi:television
          tap_action:
            action: toggle
          entity: media_player.fernseher
          card_mod:
            style: |
              ha-card {
                --chip-background: {{ 'rgba(166, 207, 152, 1)' if is_state('media_player.tv', 'on') else 'rgba(166, 207, 152, 0.3)' }};
                padding: 5px!important;
                border-radius: 100px!important;
              }                
styles:
  grid:
    - grid-template-areas: "\"n btn1 btn2\" \"temp btn1 btn2\" \"hum btn1 btn2\" \"i btn1 btn2\""
    - grid-template-columns: 1fr min-content min-content min-content
    - grid-template-rows: min-content min-content min-content 1fr
  card:
    - padding: 22px 8px 22px 22px
    - height: 200px
  custom_fields:
    temp:
      - justify-self: start
      - font-size: 14px
      - opacity: "1"
      - padding-top: 10px
    hum:
      - justify-self: start
      - font-size: 14px
      - opacity: "1"
    btn1:
      - justify-content: start
      - align-self: end
    btn2:
      - justify-content: end
      - align-self: end
      - padding-left: 6px
  name:
    - justify-self: start
    - font-size: 18px
    - font-weight: 500
    - color: white
    - opacity: "1"
  img_cell:
    - justify-content: start
    - position: absolute
    - width: 120px
    - height: 120px
    - left: 0
    - bottom: 0
    - margin: 0 0 -20px -20px
    - background: "#FFC47E"
    - border-radius: 500px
    - opacity: "0.5"
  icon:
    - position: relative
    - width: 60px
    - color: black
    - opacity: "1"
view_layout:
  grid-area: Büro