Templating inside a markdown card

Im trying to list all lights which are switched on in a markdown card, but i cannot get what i want.
The template returns the correct content, but i cannot figure out how to format it properly, any help would be much appreciated.
I’d like the list of lights to be on 1 lien, with the formatting inline with h2
I’m sure this is my lack of markdown knowledge, bit after hours of searching i cannot find an answer

  - type: 'custom:auto-entities'
    show_empty: false
        - domain: light
          state: "on"
        - type: markdown
          content: |
            # Lights
            ## There are currently {{ states.light|selectattr("state", "equalto", "on")|list|length }} lights turned on <br>
            ### {% for s in states.light %}
                  {% if s.state == "on" %}
                    {{ state_attr(s.entity_id, 'friendly_name') }},
                  {% endif %}
                {% endfor %}
              .: |
                ha-card {
                  --ha-card-background: none !important;
                  box-shadow: none !important;
                  line-height: 1;
                $: |
                  ha-markdown-element {
                    letter-spacing: 0;
                    line-spacing: 22px;
                  h1 {
                    font-size: 20px !important;
                  h2 {
                    font-size: 15px !important;

(I have redacted some irrelavant code for the button)
Screenshot 2021-11-11 122301