diff --git a/ipywidgets/static/widgets/js/widget_color.js b/ipywidgets/static/widgets/js/widget_color.js
index 5b46f3fb88..89123372d5 100644
--- a/ipywidgets/static/widgets/js/widget_color.js
+++ b/ipywidgets/static/widgets/js/widget_color.js
@@ -27,14 +27,15 @@ define([
 
             this.$colorpicker = $("<input type='color' />")
                 .addClass("input-group-addon")
-                .css("width", "32px")
                 .appendTo(this.$color_container);
 
             this.listenTo(this.model, "change:value", this._update_value, this);
             this.listenTo(this.model, "change:description", this._update_description, this);
+            this.listenTo(this.model, "change:short", this._update_short, this);
             this.$colorpicker.on("change", this._picker_change.bind(this));
             this.$textbox.on("change", this._text_change.bind(this));
 
+            this._update_short();
             this._update_value();
             this._update_description();
         },
@@ -47,11 +48,25 @@ define([
             var description = this.model.get('description');
             if (description.length === 0) {
                 this.$label.hide();
+                this.$color_container.css("justify-content", "auto");
             } else {
                 this.typeset(this.$label, description);
+                this.$color_container.css("justify-content", "flex-end");
                 this.$label.show();
             }
         },
+        _update_short: function() {
+            var short = this.model.get('short');
+            if (short) {
+                this.$el.addClass('short');
+                this.$colorpicker.removeClass("input-group-addon");
+                this.$textbox.hide();
+            } else {
+                this.$el.removeClass('short');
+                this.$colorpicker.addClass("input-group-addon");
+                this.$textbox.show();
+            }
+        },
         _picker_change: function() {
             this.model.set("value", this.$colorpicker.val());
             this.touch();
diff --git a/ipywidgets/static/widgets/js/widget_selection.js b/ipywidgets/static/widgets/js/widget_selection.js
index ee3d046f9f..526280e4d7 100644
--- a/ipywidgets/static/widgets/js/widget_selection.js
+++ b/ipywidgets/static/widgets/js/widget_selection.js
@@ -128,17 +128,8 @@ define([
                 this.$droplabel.css(name, value);
                 this.$dropbutton.css(name, value);
                 this.$droplist.css(name, value);
-            } else if (name == 'width') {
-                this.$droplist.css(name, value);
-                this.$droplabel.css(name, value);
-            } else if (name == 'height') {
-                this.$droplabel.css(name, value);
-                this.$dropbutton.css(name, value);
-            } else if (name == 'margin' || name == 'padding') {
+            } else { 
                 this.$el.css(name, value);
-            } else {
-                this.$droplist.css(name, value);
-                this.$droplabel.css(name, value);
             }
         },
 
diff --git a/ipywidgets/static/widgets/less/widgets.less b/ipywidgets/static/widgets/less/widgets.less
index dc11d0c3fe..c090de4c3c 100644
--- a/ipywidgets/static/widgets/less/widgets.less
+++ b/ipywidgets/static/widgets/less/widgets.less
@@ -187,7 +187,18 @@
 
 .widget-colorpicker {
     /* Button */
-    width : @widget-width-short;
+    & {
+        width : @widget-width;
+    }
+    &.short {
+        width : @widget-width-short;
+    }
+
+    display: flex;
+
+    .input-group {
+        flex-grow: 1;
+    }
 }
 
 .widget-button {
@@ -259,6 +270,20 @@
     width : @widget-width;
 }
 
+.widget-dropdown {
+    /* Dropdown */
+    width : @widget-width;
+
+    .widget_item {
+        display: flex;
+        flex-grow: 1;
+    }
+
+    .widget-combo-btn {
+        flex-grow: 1;
+    }
+}
+
 .widget-numeric-text {
     /* Single Line Textbox - used for IntTextView and FloatTextView */
     width : @widget-width-short;
@@ -324,6 +349,7 @@
 
     input[type="color"] {
         height: 32px;
+        width: 28px;
         padding: 1px;
     }
 
diff --git a/ipywidgets/widgets/widget_color.py b/ipywidgets/widgets/widget_color.py
index dc6d35a5c5..d0d1581bcb 100644
--- a/ipywidgets/widgets/widget_color.py
+++ b/ipywidgets/widgets/widget_color.py
@@ -8,12 +8,13 @@
 
 from .widget import DOMWidget, register
 from .trait_types import Color
-from traitlets import Unicode
+from traitlets import Unicode, Bool
 
 
 @register('IPython.ColorPicker')
 class ColorPicker(DOMWidget):
     value = Color('black', sync=True)
+    short = Bool(sync=True)
     description = Unicode(sync=True)
     
     _view_name = Unicode('ColorPicker', sync=True)