misode.github.io/shared.html

<div class="row my-4">
    <div class="col-12 col-lg-7 mb-3 structure-container" data-index="root">
        <div id="lootTableToolbar" class="input-group d-none mb-3">
            <button type="button" class="btn btn-success d-block mr-3 float-left" onclick="addComponent(this, 'pools')"data-field="table" data-i18n="pool_add"></button>
            <div class="input-group-prepend table-type">
                <span class="input-group-text rounded-left" data-i18n="table.type"></span>
            </div>
            <select id="tableType" class="form-control mr-3 rounded-right table-type" style="max-width: 9em;" onchange="updateTableType(this)"></select>
            <div class="custom-control custom-checkbox mr-3" style="margin: auto 0">
                <input type="checkbox" class="custom-control-input" id="luckBased" onchange="updateLuckBased(this)">
                <label class="custom-control-label" for="luckBased" data-i18n="luck_based"></label>
            </div>
            <div id="showSourceButton" class="ml-auto d-none">
                <button type="button" class="btn btn-secondary" onclick="showSource()" data-i18n="show_source"></button>
            </div>
        </div>
        <div id="structure" class="loot-table" data-index="root">
        </div>
    </div>
    <div class="col-12 col-lg-5 source-container">
        <div class="mb-3 float-lg-right source-menu">
            <div class="input-group">
                <div class="btn-group">
                    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"
                        data-i18n="more"></button>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" onclick="updateIndentation(2)" data-i18n="2_spaces"></a>
                        <a class="dropdown-item" onclick="updateIndentation(4)" data-i18n="4_spaces"></a>
                        <a class="dropdown-item" onclick="updateIndentation('\t')" data-i18n="tabs"></a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" onclick="hideSource()" data-i18n="hide_source"></a>
                    </div>
                </div>
                <button id="linkSource" type="button" class="btn btn-secondary ml-3" onclick="linkSource()"
                    data-i18n="share"></button>
                <button type="button" class="btn btn-secondary ml-3" onclick="copySource()" data-i18n="copy"></button>
            </div>
        </div>
        <div id="copyContainer" class="mb-3 d-none">
            <input id="copyTextarea" rows="1" class="form-control"></input>
            <button id="copy" type="button" class="btn btn-block btn-secondary mt-2" onclick="copyLink()"
                data-i18n="copy"></button>
        </div>
        <textarea id="source" class="form-control code" onchange="updateSource()" rows="19"
            spellcheck="false"></textarea>
    </div>
</div>