move required ship list

src/App.vue

 <template>
   <div>
     <div v-if="phase === 'setup'" class="card">
-      <div class="card-body">
+      <div class="card-body d-flex">
         <v-grid v-model:grid="myGrid" @clicked="edit(myGrid, $event)" />
+        <ul>
+          <template v-for="l in Math.max(myGrid.width, myGrid.height)">
+            <li
+              v-if="required[l] || myGrid.shipCount(l)"
+              :key="l"
+              :style="`color:${
+                (required[l] || 0) === myGrid.shipCount(l) ? 'green' : 'red'
+              }`"
+            >
+              {{ l }}er: {{ myGrid.shipCount(l) }} von {{ required[l] || 0 }}
+            </li>
+          </template>
+        </ul>
       </div>
       <div class="card-footer btn-group">
         <button class="btn btn-danger" @click="myGrid.reset()">Reset</button>
@@ -22,22 +35,7 @@
         <v-grid v-model:grid="otherGrid" />
       </div>
     </div>
-    <ul v-if="phase === 'setup'">
-      <template v-for="l in Math.max(myGrid.width, myGrid.height)">
-        <li
-          v-if="required[l] || myGrid.shipCount(l)"
-          :key="l"
-          :style="`color:${
-            (required[l] || 0) === myGrid.shipCount(l) ? 'green' : 'red'
-          }`"
-        >
-          {{ l }}er: {{ myGrid.shipCount(l) }} von {{ required[l] || 0 }}
-        </li>
-      </template>
-    </ul>
-
-    <br />
-    <textarea readonly v-text="json" />
+    <!-- <textarea readonly v-text="json" /> -->
   </div>
 </template>