Reposition Elements in Card

[AbdulRaufs]

I am working on this codepen. Urban Tree Map V2 (codepen.io)

A dynamic website showing top 5 species by count and loading the information in Card. Currently all the card elements are left aligned. I want the first two elements (image and Tree Species) left aligned while the count and the switch button to right.

I have tested many element properties in developer mode of edge but unable to get desired results.

Please help.

Regards,

[KittyHurley]

Its possible the List and List Item may be better suited for your use case - both components offer more configurability options via attributes and slots, and could provide usability and accessibility improvements.

For instance: https://codepen.io/geospatialem/pen/mdoxyyG 

[AbdulRaufs · Accepted solution]

Hi, thank for your support. I was finding it difficult to implement list on my page with the structure I currently have. I tested some more, and I managed to get the desired result by adjust the width of label rather than trying to move chip and switch elements to right. 

Hope the longest Species name fits in 300px :). 

Thanks and Regards,