esri example "Edit features in 3D with the Editor widget" - how to insert the Expand and Snap elements into a custom widget

[MichaelLev]

I'm developing custom widgets for WAB (Develper Edtion) 2.20, Launchpad Theme, on 3D Scenes (ArcGIS API for javascript 4.20). I am still a newbie.

My question: How to put, by code, the snapping elements (the info and the Expand that contains the configuration) from ESRI code example Edit features in 3D with the Editor widget  into lower right corner of my widget? The elements are created by code, so they must be put there by code.

To be more specific: All I need is to adapt next code (from ESRI example) to insert the 2 components into lower right in the widget:

view.ui.add([{
    component: configurationExpand,
    position: "bottom-right",
    index: 0
}, {
component: "info",
    position: "bottom-right",
    index: 1
}]);

// If the snapping configuration is toggled open, hide the info window
configurationExpand.watch("expanded", (value) => {
    if (value) {
        document.getElementById("info").classList.add("esri-hidden");
    } else {
        document.getElementById("info").classList.remove("esri-hidden");
   }
});

Help wil be greatly appreciated.

[MichaelLev · Accepted solution]

I succeeded, by putting the Expand and th einfo label in the widget HTML, thus:

<div>
    <span class="div-left" id="edit3dexpand" data-dojo-attach-point="edit3dexpand"></span>
    <span class="div-left" id="info">${nls.titleConfigureSnapping}</span>
</div>

and in the javascript&colon;

const configurationExpand = new Expand({

   ... (other constructor lines remain the same)

    container: that.edit3dNode.querySelector("#edit3dexpand")

});

and in the css:

.jimu-widget-edit3d .div-left { float: left; }

.jimu-widget-edit3d .div-right { float: right; }