How to target text 'Détails' span within mapped button components in React?

Question

In react I'm trying to change the position of "Détails", a button that contains an icon and text. I cannot modify the HTML structure as it comes from a shared component.

Here is the code where I use this shared component like this:

return (
<>
  {data.map((item, index) => (
    <div className={`${styles['card-group']} details-button-wrapper`} key={index}>
      <DetailModal item={item} title={getItemTitle(item)}>
        Détails
      </DetailModal>
      <CardDetail
        key={`${item.make}-${item.groupByCommercialName}-${index}`}
        position={index + 1}
        title={getItemTitle(item)}
        maxYear={item.maxYear || new Date().getFullYear()}
        iconTextListProps={getIconTextListProps(item)}
        {...getItemMetrics(item)}
      />
    </div>
  ))}
</>
  );

I want to right-align only the element "Détails" without affecting CardDetail.

What I've tried:

1. Adding text-align: right to the parent div
2. Using float: right on the button
3. Applying text-align: right to the button directly
4. Using flexbox with justify-content: flex-end
5. Targeting the specific span with CSS selectors

None of these attempts worked - they either didn't affect the alignment or disrupted the existing layout.

I need a CSS selector that will specifically target the text span without modifying the component's source code. How can I achieve this?

Answer 1

This might work, modify the .details-button-wrapper container to display as flex and push the button to the right.

.details-button-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}