Handling multiple selects in the scrap integration

I want to display my waste collection dates on a card. Something like

Rubbish: Fri 15th
Recycling: Fri 15th

The website I am scraping returns html like the following

<div class="row text-center">
            <div class="col-12 col-md-4">
                <div id="rubbish" class="collection text-center service">
                        <span>Rubbish</span>
                        <span>FRI</span>
                        <span>15 Jul</span>
                </div>
            </div>
            <div class="col-12 col-md-4">
                <div id="recycling" class="collection text-center service">
                        <span>Recycling</span>
                        <span>FRI</span>
                        <span>15 Jul</span>
                </div>
            </div>
            <div class="col-12 col-md-4">
                <div id="garden" class="collection text-center service">
                        <a href="/rubbish-recycling-and-waste/rubbish-and-waste-collections/garden-waste-collections/" title="Subscribe to Garden Waste collections">
                            Subscribe to Garden Waste collections
                        </a>
                </div>
            </div>
    </div>

How can I select both the rubish id div and the recycling div and the combine the three span entries ?

I know I can select one set of spans with something like

div > #rubbish"

Thanks

Did you mean this: div.collection.text-center.service > span ?

Or this: #rubbish, #recycling

Maybe this: #rubbish > span, #recycling > span

Yeah that would slect both entities. In the dashboard that displays “Rubbish” now.
Not the other spans

Not sure how to debug

Check out this post.

I the end I found the scrap way too hard when wanting to get specific elements and do joining etc.
I wrote a quick python script that gets the html and returns a json object of variables I wanted.

I the call this in homeassistant with the command_line and template integration to reull out the json keys etc