feat: created a component that allows for side-by-side content

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;

src/components/SideBySide.module.scss

@@ -0,0 +1,11 @@
+.container {
+  display: flex;
+
+  div {
+    flex: 1;
+  }
+
+  div:nth-child(2) {
+    margin-left: 1rem;
+  }
+}