<div class="drawer" id="drawer">
    <form name="drawer-form" class="drawer__content" id="drawer__content">
        <div class="drawer__head">
            <span class="drawer__close" onclick="toggleDrawer()">
                <svg
                    class="icon icon--md"
                    tabindex="0"
                    role="button"
                    aria-label="close"
                ><use xlink:href="#ei-close"></use></svg>
            </span>
            <h2>Super Powers Form</h2>
        </div>
        <div class="drawer__body">
            <fieldset class="fieldset">
                <label class="label">
                    Do you have super powers?
                    <select class="select select--inline">
                        <option value="">I dono</option>
                        <option value="">Darn tootin!</option>
                        <option value="">Nope</option>
                        <option value="">Do you play DND?</option>
                        <option value="">Tastes like burning</option>
                    </select>
                </label>
            </fieldset>
            <fieldset class="fieldset">
                <div class="fieldset__legend">Describe your powers.</div>
                <label class="label label--inline" for="physical">
                    <input class="checkbox" type="checkbox" id="physical">
                    Physical
                </label>
                <label class="label label--inline" for="mental">
                    <input class="checkbox" type="checkbox" id="mental">
                    Mental
                </label>
                <label class="label label--inline" for="environmental">
                    <input class="checkbox" type="checkbox" id="environmental">
                    Environmental
                </label>
                <label class="label label--inline" for="magical">
                    <input class="checkbox" type="checkbox" id="magical">
                    Magical
                </label>
                <label class="label label--inline" for="can-fart-rainbows">
                    <input class="checkbox" type="checkbox" id="can-fart-rainbows">
                    Can Fart Rainbows
                </label>
            </fieldset>
            <fieldset class="fieldset">
                <label class="label" for="how-you-use-powers">
                    Describe how/why you've used your powers.
                </label>
                <textarea
                    class="textarea textarea--full-bleed"
                    type="textarea"
                    id="how-you-use-powers"
                ></textarea>
            </fieldset>
            <fieldset class="fieldset" style="text-align:center;">
                <img
                    alt="Secretwars Image"
                    src="https://upload.wikimedia.org/wikipedia/en/thumb/0/08/Secretwars1.png/220px-Secretwars1.png"
                    width="220"
                    height="329"
                />
            </fieldset>
        </div>
        <div class="drawer__foot">
            <button class="button" onclick="toggleDrawer()">Cancel</button>
            <button class="button button--primary" onclick="toggleDrawer()">Save</button>
        </div>
    </form>
</div>

<button
    class="button button--primary"
    id="open-drawer"
    onclick="toggleDrawer()"
>Click at your own peril</button>
<script>
    var drawer = document.getElementById("drawer");

    function toggleDrawer() {
        drawer.classList.toggle("drawer--open");
    }
</script>