Help needed - mix icons and text on glance-basis card

Configuration Frontend
1

Hi,
I’ve spent a lot of time trying to find a solution to mix text and icons on single row of a glance (or similar) card. I ended up with something like this:

ha1
The above picture is made from 2 glance cards with some card-mod styling. The last icon (down-arrow) represents the atmospheric pressure tendency. I would like mix some elements of these 2 cards in one, and achieve something like this (it’s a forged picture, not real HA card):
ha2
Does anyone know the trick to achieve this?

2

Probably a grid layout in the custom-button-card.

3

Thanks, it will probably help. I made a quick card and looks promising. I wonder if I could do an icon template in a more elegant way that this:

styles:
  grid:
    - grid-template-areas: '"i temp hum press press wind"'

(...)

  press: |
    [[[
        if (states['sensor.accuweather_pressure_tendency'].state == 'rising')
          return `${states['sensor.accuweather_pressure'].state}hPa
          <ha-icon
          icon="mdi:arrow-up"
          style="width: 20px; height: 20px; ">
          </ha-icon>`
        if (states['sensor.accuweather_pressure_tendency'].state == 'falling')
          return `${states['sensor.accuweather_pressure'].state}hPa
          <ha-icon
          icon="mdi:arrow-down"
          style="width: 20px; height: 20px; ">
          </ha-icon>`
        return `${states['sensor.accuweather_pressure'].state}hPa
          <ha-icon
          icon="mdi:minus"
          style="width: 20px; height: 20px; ">
          </ha-icon>`
    ]]]