Pending changes exported from your codespace

src/App.tsx

@@ -379,7 +379,7 @@ function App() {
                   Attack Method
                 </label>
                 <select
-                  value={attackMethod}
+                  value={attackMethod} 
                   onChange={(e) => setAttackMethod(e.target.value)}
                   className={`${
                     animState === 0 || animState === 3 ? "" : "text-gray-900"
@@ -462,8 +462,8 @@ function App() {
             </div>
           </div>
           {/*Attack method description*/}
-          <div>Idk what to put here</div>
-
+          <div className = "w-full px-4 py-2 border border-pink-200 rounded-lg outline-none focus:border-pink-500 focus:ring-2 focus:ring-pink-200" id="description">{attackMethod}</div>
+          <br/>
           {/* Stats Widgets */}
           <div className="grid grid-cols-3 gap-4 mb-6">
             <div className="p-4 rounded-lg bg-gradient-to-br from-pink-500/10 to-blue-500/10">

src/index.css

@@ -164,3 +164,8 @@ how to remove the vertical space around the range input in IE*/
     /*Edge starts the margin from the thumb, not the track as other browsers do*/
   }
 }
+
+#description {
+  width: 100%;
+  /*border:1px solid rgba(236, 72, 153, 1);*/
+}