Styling

src/App.css

@@ -17,4 +17,5 @@ header {
 
 footer {
   background-color: antiquewhite;
+  margin-top: 2em;
 }

src/App.js

@@ -13,6 +13,7 @@ import { Options } from 'components/Options'
 import { TextInput } from 'components/TextInput'
 import { TextOutput } from 'components/TextOutput'
 import { TotalTime } from 'components/TotalTime'
+import { Div } from 'styles/Div'
 
 export const App = () => {
   const { t } = useTranslation()
@@ -32,13 +33,15 @@ export const App = () => {
       <main>
         <Container>
           <h2>Widget</h2>
+          <Div maxWidth="600px" margin="0 auto">
             <RsvpWidget />
-          <Flex>
-            <FlexMain padding="10px">
+          </Div>
+          <Flex flexWrap="wrap">
+            <FlexMain padding="10px" minWidth="300px">
               <h2>Options</h2>
               <Options />
             </FlexMain>
-            <FlexMain>
+            <FlexMain padding="10px" minWidth="300px">
               <h2>Text input</h2>
               <TextInput />
             </FlexMain>

src/styles/Div.js

@@ -0,0 +1,6 @@
+import React from 'react'
+
+/** A generic div. Mainly for development. Try to use as sparse as possible */
+export const Div = ({ children, ...rest }) => {
+  return <div style={rest}>{children}</div>
+}