From fcdfbeb3ca02f948fbee6e1410e9175c712245c6 Mon Sep 17 00:00:00 2001
From: Lukas Elmer <lukas.elmer@gmail.com>
Date: Mon, 5 Jun 2023 22:59:50 +0200
Subject: [PATCH] docs: add component to split left/right in half

---
 docs/docs/api-reference/graphql-api/mutation.mdx | 11 +++++++++++
 docs/src/components/LeftRight.jsx                | 12 ++++++++++++
 2 files changed, 23 insertions(+)
 create mode 100644 docs/src/components/LeftRight.jsx

diff --git a/docs/docs/api-reference/graphql-api/mutation.mdx b/docs/docs/api-reference/graphql-api/mutation.mdx
index c3e59615c1023..8a5b0d58ba944 100644
--- a/docs/docs/api-reference/graphql-api/mutation.mdx
+++ b/docs/docs/api-reference/graphql-api/mutation.mdx
@@ -10,8 +10,13 @@ keywords:
   - mutation
 ---
 
+import LeftRight from '@site/src/components/LeftRight';
+
 # API Reference - Mutation
 
+<LeftRight>
+  <section>
+
 ## **insert** (upsert) syntax {#insert-upsert-syntax}
 
 ```none
@@ -33,6 +38,9 @@ mutation [<mutation-name>] {
 | on-conflict         | false    | [OnConflictClause](#postgres-on-conflict) | In Postgres, converts _insert_ to _upsert_ by handling conflict |
 | if-matched          | false    | [IfMatchedClause](#sqlserver-if-matched)  | In MS SQL Server, converts _insert_ to _upsert_ using a match   |
 
+  </section>
+  <section>
+
 **Example: Insert**
 
 ```graphql
@@ -59,6 +67,9 @@ mutation upsert_author {
 }
 ```
 
+  </section>
+</LeftRight>
+
 ## **insert_one** syntax {#insert-upsert-one-syntax}
 
 ```none
diff --git a/docs/src/components/LeftRight.jsx b/docs/src/components/LeftRight.jsx
new file mode 100644
index 0000000000000..813a557246c2a
--- /dev/null
+++ b/docs/src/components/LeftRight.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+const LeftRight = ({ children }) => {
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))' }}>
+      <div style={{ paddingRight: '10px' }}>{children[0]}</div>
+      <div>{children[1]}</div>
+    </div>
+  );
+};
+
+export default LeftRight;