From 82b34147d9c9dbbf83124393ba5bf96abb1eb467 Mon Sep 17 00:00:00 2001
From: Zack Stickles <zstickles@gmail.com>
Date: Fri, 5 Jun 2020 16:01:07 -0700
Subject: [PATCH] feat: created a component that allows for side-by-side
 content

---
 src/components/SideBySide.js          | 31 +++++++++++++++++++++++++++
 src/components/SideBySide.module.scss | 11 ++++++++++
 2 files changed, 42 insertions(+)
 create mode 100644 src/components/SideBySide.js
 create mode 100644 src/components/SideBySide.module.scss

diff --git a/src/components/SideBySide.js b/src/components/SideBySide.js
new file mode 100644
index 000000000..678ea86f4
--- /dev/null
+++ b/src/components/SideBySide.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+
+import styles from './SideBySide.module.scss';
+
+const SideBySide = ({ className, children, type, dir }) => {
+  const childObjects = React.Children.toArray(children);
+  const side = childObjects.find((child) => child?.props?.mdxType === type);
+  const rest = childObjects.filter((child) => child !== side);
+
+  return (
+    <div className={cx(className, styles.container)}>
+      <div>{rest}</div>
+      {side && <div>{side}</div>}
+    </div>
+  );
+};
+
+SideBySide.propTypes = {
+  children: PropTypes.node.isRequired,
+  type: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  dir: PropTypes.string,
+};
+
+SideBySide.defaultProps = {
+  dir: 'right',
+};
+
+export default SideBySide;
diff --git a/src/components/SideBySide.module.scss b/src/components/SideBySide.module.scss
new file mode 100644
index 000000000..7155d5e97
--- /dev/null
+++ b/src/components/SideBySide.module.scss
@@ -0,0 +1,11 @@
+.container {
+  display: flex;
+
+  div {
+    flex: 1;
+  }
+
+  div:nth-child(2) {
+    margin-left: 1rem;
+  }
+}