JSFiddle - React, Tailwind, and code Playground

CSS

.label {
    height:30px;
    padding:4px;
    line-height:30px;
    border-style:solid;
    border-width:1px 0px;
    border-color:#888;
}
.drawer {
    box-shadow: inset 2px 2px 3px -1px black;
    background:#ccc;
}

.drawer > * {
    padding:3px;
}

JavaScript

enyo.kind({
    name:"onyx.BetterDrawer",
    kind:"onyx.Drawer",
    published:{
        // set to false to prevent calling this.container.resized()
        notifyOnResize:true
    },
    events:{
        // fired when drawer animation completes
        onComplete:""
    },
	animatorStep: function(inSender) {
		// the actual drawer DOM node adjusts its height
		if (this.hasNode()) {
			var d = inSender.dimension;
			this.node.style[d] = this.domStyles[d] = inSender.value + "px";
		}
		// while the client inside the drawer adjusts its position to move out of the visible area
		var cn = this.$.client.hasNode();
		if (cn) {
			var p = inSender.position;
			var o = (this.open ? inSender.endValue : inSender.startValue);
            // ****** negative top offset is applied to all shown clients when one is hidden because it's stored in domStyles. by not persisting it to domStyles, we avoid this at the risk of losing the intermediate state during animation
            // cn.style[p] = this.$.client.domStyles[p] = (inSender.value - o) + "px";
			cn.style[p] = (inSender.value - o) + "px";
		}
		if (this.container && this.notifyOnResize) {
			this.container.resized();
		}
	},
    animatorEnd:function() {
		if (!this.open) {
            this.$.client.hide();
		}
		else {
            // save changes to this.domCssText --> see ENYO-1561
			this.$.client.domCssText = enyo.Control.domStylesToCssText(this.$.client.domStyles);
			// at end of open animation, clean limit on height/width
			var v = (this.orient == "v");
			var d = v ? "height" : "width";
			var p = v ? "top" : "left";
			var cn = this.$.client.hasNode();
			// clear out changes to container position & node dimension
			if (cn) {
				cn.style[p] = this.$.client.domStyles[p] = null;
			}
			if (this.node) {
				this.node.style[d] = this.domStyles[d] = null;
			}
		}
        
		if (this.container && this.notifyOnResize) {
			this.container.resized();
		}
        
        this.doComplete();
    }
});

enyo.kind({
   ...