Make exsting entry boxes move depending on existing entry amount

src/App.js

@@ -88,7 +88,8 @@ export function MyForm(props) {
 
   // Create form for user to input data
   return (
-    <div style={{ backgroundColor: '#84BC9C' }}>
+    <div style={{ backgroundColor: '#84BC9C', display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
+      <div style={{ flex: 1 }}>
         <Form onSubmit={submitHandler}>
           <Form.Group>
             <Form.Label style={{ fontSize: '40px' }}>Ray's Unbased Takes</Form.Label>
@@ -136,9 +137,12 @@ export function MyForm(props) {
             </Col>
           </Form.Group>
         </Form>
+        </div>
+        <div>
         <h2>Existing Unbased Takes</h2>
         <DisplayEntries />
         </div>
+    </div>
   );
 }
 export default MyForm;

src/components/DisplayEntries.js

@@ -23,9 +23,9 @@ export function DisplayEntries() {
     }, []);
    
     return (
-      <div className="cardContainer">
+      <div className="cardContainer" style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center' }}>
         {entries.map((entry) => (
-          <Card key={entry.id} style={{ width: '18rem' }}>
+  <Card key={entry.id} style={{ margin: '1rem', maxWidth: 'calc(50% - 2rem)' }}>
             <Card.Body>
               <Card.Title>{entry.submitter}</Card.Title>
               <Card.Subtitle className="mb-2 text-muted">{entry.date}</Card.Subtitle>