I want to add the following CSS padding: 5px 20px 2px 6px; to this parent element class .clickbtn, only if it has a child SVG element, and that SVG element has the font awesome class of .fa-solid fa-tree or .fa-leaf. Basically, if .clickbtn has a child SVG element, then only I want to add the CSS on the .clickbtn element.

HTML:

 <div class="containerWithClickableButton">
    <div class="containerContent">
        <div class="centeringContent">
            <h2>Environment is everything that is around us.</h2>
            <div>The natural environment or natural world encompasses all biotic and abiotic things occurring naturally, meaning in this case not artificial.</div>
        </div>
    </div>
    <div>
        <a href="https://www.nationalgeographic.com/environment" title="about environment" class="clickbtn clickbtn-bydefault" role="button" target="_blank"> Learn More.
            <svg class="svg-inline--fa fa-solid fa-tree" role="img" xmlns="http://www.w3.org/2000/svg"></svg>
        </a>
    </div>
</div> 

I was able to do this using the :has() CSS pseudo-class:

.containerWithClickableButton .clickbtn:has(.fa-solid fa-tree, .fa-leaf)
{
   padding: 5px 20px 2px 6px;
}

But because sometimes the :has() is not supported on all browsers, I am wondering is there a different way of doing this without the :has() CSS pseudo-class?