2 files changed, 66 insertions, 0 deletions
diff --git a/ui/app/components/layout/index.js b/ui/app/components/layout/index.js
new file mode 100644
index 00000000..8e7c4b58
--- /dev/null
+++ b/ui/app/components/layout/index.js
@@ -0,0 +1,41 @@
+import React from 'react'
+
+import './layout.less'
+
+class HorizontalLayout extends React.Component {
+  static get defaultProps() {return{
+    equalWidths: false
+  }}
+
+  constructor(props) {
+    super(props)
+  }
+
+  render() {
+    let className = "horizontal-layout"
+    if (this.props.equalWidths) {
+      className = className + " equal" + this.props.children.length
+    }
+    return (
+      <div className={className}>
+        {this.props.children}
+      </div>
+    )
+  }
+}
+
+class Column extends React.Component {
+  constructor(props) {
+    super(props)
+  }
+
+  render() {
+    return (
+      <div className="layout-column">
+        {this.props.children}
+      </div>
+    )
+  }
+}
+
+export {HorizontalLayout, Column}
+\ No newline at end of file
diff --git a/ui/app/components/layout/layout.less b/ui/app/components/layout/layout.less
new file mode 100644
index 00000000..dae99aa3
--- /dev/null
+++ b/ui/app/components/layout/layout.less
@@ -0,0 +1,25 @@
+@gutter: 20px;
+
+.horizontal-layout {
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex: 1 1 auto;
+  flex: 1 1 auto;
+  > .layout-column {
+    display: -webkit-flex;
+    display: flex;
+    -webkit-flex: 1 1 auto;
+    flex: 1 1 auto;
+    margin-right: @gutter;
+  }
+  > .layout-column:last-child {
+    margin-right: 0px;
+  }
+}
+
+.horizontal-layout.equal1 > .layout-column {width: 100%;}
+.horizontal-layout.equal2 > .layout-column {width: 50%;}
+.horizontal-layout.equal3 > .layout-column {width: 33.33%;}
+.horizontal-layout.equal4 > .layout-column {width: 25%;}
+\ No newline at end of file