diff --git a/web/components/layout/col.tsx b/web/components/layout/col.tsx
new file mode 100644
index 00000000..da71f130
--- /dev/null
+++ b/web/components/layout/col.tsx
@@ -0,0 +1,5 @@
+export function Col(props: { children?: any; className?: string }) {
+  const { children, className } = props
+
+  return <div className={`${className} flex flex-col`}>{children}</div>
+}
diff --git a/web/components/layout/row.tsx b/web/components/layout/row.tsx
new file mode 100644
index 00000000..4faaeb6c
--- /dev/null
+++ b/web/components/layout/row.tsx
@@ -0,0 +1,5 @@
+export function Row(props: { children?: any; className?: string }) {
+  const { children, className } = props
+
+  return <div className={`${className} flex flex-row`}>{children}</div>
+}
diff --git a/web/components/layout/spacer.tsx b/web/components/layout/spacer.tsx
new file mode 100644
index 00000000..04a9b0d7
--- /dev/null
+++ b/web/components/layout/spacer.tsx
@@ -0,0 +1,8 @@
+export function Spacer(props: { w?: number; h?: number }) {
+  const { w, h } = props
+
+  const width = w === undefined ? undefined : w * 0.25 + 'rem'
+  const height = h === undefined ? undefined : h * 0.25 + 'rem'
+
+  return <div style={{ width, height, flexShrink: 0 }} />
+}