Vertical Text Position with Custom Button Card

I’m not incredibly proficient with CSS & am having trouble positioning text elements vertically in these two cards. Hoping someone can give me direction on how to get the text from the bottom of the cards.

LEFT CARD CODE:

type: custom:button-card
entity: binary_sensor.vistaalarm_armed
show_label: true
show_icon: true
name: ALARM
label: ''
tap_action:
  action: call-service
  service: esphome.vistaalarm_alarm_arm_home
icon: mdi:security
styles:
  card:
    - width: 275px
    - height: 275px
    - font-weight: bold
  name:
    - font-size: 40px
    - font-family: Georgia, serif
state:
  - value: 'on'
    label: ARMED
    styles:
      card:
        - background-color: darkred
  - value: 'off'
    label: DISARMED
    styles:
      card:
        - background-color: darkgreen

RIGHT CARD CODE:

type: custom:button-card
entity: sensor.jewell_air_temperature
name: Backyard
show_name: true
show_state: true
show_icon: false
show_units: false
styles:
  name:
    - font-size: 40px
    - align-self: start
    - font-family: Georgia, serif
    - padding: 10px 0px 0px 0px
    - letter-spacing: 2px
  state:
    - font-size: 90px
  card:
    - background-color: black
    - height: 275px
    - width: 275px
    - background-image: url("/local/images/outside.png")
    - color: black
    - font-weight: bold