Template with multiple values in separated divs?

Is it possible to show values in separated divs?

I have created a template sensor with 2 values and want to style them different from each other. What is the best possible way for doing that?

energie_solar_voor_current_max:
  friendly_name: Huidig en max
  value_template: >-
    {{ ((states('sensor.paneel_voor_1_max') | float )) | round(0) }}
    {{ ((states('sensor.envoy_122244026326_inverter_482235037056') | float )) | round(0) }}
  unit_of_measurement: "kWh"
  icon_template: mdi:transmission-tower

On the dashboard they are shown like this:

Scherm­afbeelding 2023-03-21 om 16.09.02

Like this I can’t style them apart from each other.

Conditional cards do not support displaying a complex value in separate divs.
Possible solution:

  1. Do not merge 2 values into one, let them be 2 separate sensors.
  2. In markdown card you may place both sensors’ values in different elements.
  3. In custom:button-card you may use additional formatting to place these values as you like.
  4. card-mod allows to add a value of the 2nd sensor into a “:after/:before” pseudoclass to the 1st value.

Thanks for the replies, I’ve fixed this by using a sensor value for the name in the template sensor. In that way I was also able to style them different from each other.

energie_solar_achter5_total_info:
  friendly_name: "max. {{ ((states('sensor.paneel_achter_5_max') | float )) | round(0) }}"
  value_template: "{{ ((states('sensor.envoy_122244026326_inverter_482235037071') | float )) | round(0) }}"
  unit_of_measurement: "kWh"
  icon_template: mdi:lightning-bolt

Now I can show the max reached value and keep the minimal graph working in the background like this:
(The graph is very light in the background, getting more visible when the value gets higher)

Scherm­afbeelding 2023-03-23 om 09.50.21