JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="envSelection">
        <ul>
            <li>
                <button class="env">Local / DEV</button>
                <div class="advanced toReveal">
                    <input type="text">
                </div>
                <button class="advanced">Advanced</button>
            </li>
            <li class="sandbox">
                <button class="env">Sandbox</button>
            </li>
        </ul>
    </div>
</body>

CSS

.hidden, .hidden * {
    padding-top:0 !important;
    padding-bottom:0 !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
    height:0 !important;
    border-top-width:0 !important;
    border-bottom-width:0 !important;
}
.toReveal, .toReveal * {
    overflow:hidden;
    height:auto;
}
* {
    -webkit-transition:0.3s all;
    -moz-transition:0.3s all;
}

button {overflow:hidden;margin:1em;padding:1em;}

JavaScript

$(document).ready(function () {

    var $envSelection = $('#envSelection');

    var $envSelectionAdvanced = $('button.advanced, .advanced.toReveal');

    $envSelectionAdvanced.addClass('hidden');

    $envSelection.find('.env').each(function () {
        $(this).click(function () {
            if (!$(this).hasClass('active')) {

                $envSelectionAdvanced.addClass('hidden');

                if ($(this).siblings('button.advanced').length) {

                    $(this).siblings('button.advanced').toggleClass('hidden');
                }

                $envSelection.find('.env').removeClass('active');
                $(this).addClass('active');
            }
        })
    });

    $envSelection.find('button.advanced').click(function () {


        var toReveal = $(this).siblings('.advanced.toReveal');
        toReveal.toggleClass('hidden');


    });

});