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