JSFiddle - React, Tailwind, and code Playground

CSS

.map, .list {
    padding:10px;
    border:1px dashed #888;
}

.list {
    width:auto;
    height:150px;
}

.main-toolbar {
    overflow:hidden;
}

@media (max-width:767px) {
    .main-toolbar.left {
        height:0px;
        padding:0px;
        border:0;
    }
}

/* wide screen view */
@media (min-width:768px) {
    .list {
        width:320px;
        height: auto;
    }

    .main-toolbar.bottom {
        width:0px;
        padding:0px;
        border:0;
    }

    .main-toolbar.left.onyx-toolbar-inline > * {
        display:block;
    }
}

JavaScript

enyo.kind({
    name: "extras.FittableToggleLayout",
    kind: "enyo.FittableLayout",
    reflow: function() {
        this.threshold = this.container.threshold || 768;
        this.invertLayout = ("invertLayout" in this.container) ? this.container.invertLayout : false;
        
        var narrow = enyo.dom.getWindowWidth() < this.threshold,
            orient = ((narrow && !this.invertLayout) || (!narrow && this.invertLayout)) ? "v" : "h",
            dimension,
            priorLayoutClass = this.layoutClass;
        enyo.log("i'm", narrow ? "narrow" : "wide", "and", this.invertLayout ? "am" : "am not", "inverting so the orientation is", orient);
        
        if(orient == "v") {
            this.layoutClass = "enyo-fittable-rows-layout";
            dimension = "width";
        } else {
            this.layoutClass = "enyo-fittable-columns-layout";
            dimension = "height";
        }
        
        this.orient = orient;
        this.clearStyle(dimension);
        this.container.removeClass(priorLayoutClass);
        this.container.addClass(this.layoutClass);
        
        this.inherited(arguments);
    },
    clearStyle: function(dimension) {
        enyo.forEach(this.container.children, function(c) {
            c.applyStyle(dimension, null);
        });
    }
});

enyo.kind({
    name:"ex.Toolbar",
    kind:"onyx.Toolbar",
    layoutKind:"extras.FittableToggleLayout",
    classes: "main-toolbar",
    invertLayout: true,
    components:[
        {kind:"onyx.Button", content:"One"},
        {kind:"onyx.Button", content:"Two"},
        {fit:true},
        {kind:"onyx.Button", content:"Three"}
    ]
});

enyo.kind({
    name:"ex.App",
    layoutKind:"extras.FittableToggleLayout",
    style:"margin:5px;",
    components:[
        {kind:"ex.Toolbar", classes:"left"},
        {kind: "onyx.InputDecorator", style: "width:100%;box-sizing:border-box", components: [
							{name: "PingAddress", kind: "onyx.Input", placeholder: "Enter IP Address or...