<div class="row row--padded row--no-top row--no-bottom row--wide">
    <div class="column column--10">
        <a class="label link--primary" id="publish-details-toggle" href="#" onclick="toggleSection(event)" data-open="false" data-openlabel="[less]" data-closedlabel="[more]" data-slaveelementid="publish-details">[more]</a>
    </div>
</div>

<div id="publish-details" hidden="true" class="row row--padded row--wide">

    <!-- description input -->
    <div class="row row--no-top">
        <div class="column column--3 column--med-10 align-content-top">
            <label for="publish-license" class="label">Description:</label>
        </div><div class="column column--7 column--sml-10">
            <textarea rows="1" id="publish-description" class="textarea textarea--primary textarea--full-width" placeholder="Optional description"></textarea>
        </div>
    </div>

    <div class="row row--no-top">
        <div class="column column--3 column--med-10">
            <label for="publish-license" class="label">License:</label>
        </div><div class="column column--7 column--sml-10">
            <select type="text" id="publish-license" class="select select--primary">
                <option value=" ">Unspecified</option>
                <option value="Public Domain">Public Domain</option>
                <option value="Creative Commons">Creative Commons</option>
            </select>
        </div>
    </div>

    <div class="row row--no-top">
        <div class="column column--3">
            <label for="publish-nsfw" class="label">Mature:</label>
        </div><div class="column column--7">
            <input class="input-checkbox" type="checkbox" id="publish-nsfw">
        </div>
    </div>

</div>

<script type="text/javascript">
    const textarea = document.getElementById('publish-description');
    const limit = 200;
    textarea.oninput = () => {
        textarea.style.height = '';
        textarea.style.height = Math.min(textarea.scrollHeight, limit) + 'px';
    }
</script>