I have a variable `extend` which could be either an empty string `''` or `active`, which is a CSS class.

Once the top div is clicked, all subsequent elements updates with "active"

```
<div
      className={`container ${extend ? "active" : ""}`}
      onClick={() => setExtend(!extend)}
    >
      <p className={`card ${extend ? "active" : ""}`}>Visa Card</p>
      <h1 className={`balance ${extend ? "active" : ""}`}>$55,343.15</h1>
</div>

```

then my CSS looks like this

```
.container {
&.active
}

.card {
&.active
}

.balance {
&.active
}

```

I feel like there is a lot of repetition in both CSS and JS and I am wondering if there is a more elegant way to do this