diff --git a/src/client/web/src/components/layout/columns.tsx b/src/client/web/src/components/layout/columns.tsx
new file mode 100644
index 0000000..a44e92d
--- /dev/null
+++ b/src/client/web/src/components/layout/columns.tsx
@@ -0,0 +1,43 @@
+import * as React from "react";
+import { List } from "immutable";
+
+export interface Props {
+  rows: List<List<React.ReactNode>>;
+  widths: List<string>;
+  childrenClassNames?: List<string>;
+  style?: React.CSSProperties;
+  className?: string;
+}
+
+export const Columns = (props: Props) => {
+  const children = props.rows.map(
+    (row: List<React.ReactNode>, i: number): React.ReactNode => {
+      const cells = row.map((cell: React.ReactNode, j: number) => {
+        const width = props.widths.get(j, Math.trunc(100 / row.size));
+        const className = props.childrenClassNames.get(j, "");
+        return (
+          <div
+            key={`td-${i}-${j}`}
+            className={`float-l ${className}`}
+            style={{ width }}
+          >
+            {cell}
+          </div>
+        );
+      });
+
+      return (
+        <div key={`tr-${i}`}>
+          {cells}
+          <div className="fix"></div>
+        </div>
+      );
+    }
+  );
+
+  return (
+    <div style={props.style} className={props.className}>
+      {children}
+    </div>
+  );
+};