update on code

src/App.svelte

@@ -1,13 +1,28 @@
 <script lang="ts">
   import MainWrapper from './lib/MainWrapper.svelte'
+  import DamageCalculator from './lib/DamageCalculator.svelte'
+  let player1Data;
+  let player2Data;
 </script>
 
 <main class="container">
-  <div class="column-1">
-    <MainWrapper />
+  <div class="main-row">
+    <div class="column-1">
+      <MainWrapper 
+        bind:pokemonStatus={player1Data}
+      />
+    </div>
+    <div class="column-2">
+      <MainWrapper 
+        bind:pokemonStatus={player2Data}
+      />
+    </div>
   </div>
-  <div class="column-2">
-    <MainWrapper />
+  <div class="row">
+    <DamageCalculator
+      bind:player1Data={player1Data}
+      bind:player2Data={player2Data}
+    />
   </div>
 </main>
 
@@ -22,4 +37,9 @@
     width: 50%;
     border-left: 1px solid white;
   }
+  .main-row {
+    display: flex;
+    flex-direction: row;
+    height: 700px;
+  }
 </style>