Formating problem Tailwind CSS - flex boxes too big

Question

I've got a small formating problem. My CSS makes too long boxes (while I'm using the same CSS/Tailwind in the first column as the second one). If i remove flex, the problem disappears, but the content is no longer in the same row.

Here are some screenshots of the problem:

First (with flex) https://ctrlv.link/ova1 and https://ctrlv.link/zvp7

Secondary (without flex) https://ctrlv.link/MeHq

Code:

mostly just loading data and not that important stuff

import { useState, useEffect, useRef, useContext } from "react";
import { AppContext } from "/src/App";
import Axios from 'axios'

export default function Upgrader() {
  const inputRefPerc = useRef(null)
  const { userID } = useContext(AppContext);
  const [ItemsList, setItemsList] = useState([])
  const [Inventory, setInventory] = useState([])

  useEffect(() => {
    Axios.get(`http://localhost:3030/api/getItems`).then((response)=> {
      setItemsList(response.data)
    })
  }, [])  

  useEffect(() => {
    Axios.get(`http://localhost:3030/api/getInventory3/${userID}`).then((response)=> {
      setInventory(response.data);
    })
  }, [])  

    return (
      <div className="flex justify-center align-bottom">
        <div className="bg-slate-800 rounded-cool text-white w-3/5 p-3">
          <div className=" divide-y-2">
          <h1 className="text-4xl font-bold text-slate-200 py-2" >
          Upgrader 🔝
          </h1>
          <p/>
          </div>
          <div className="flex flex-row">
            <div className="w-[40%] justify-center flex font-bold text-xl"><h1>Your Items</h1></div>
            <div className="w-[20%] justify-center flex font-bold text-xl"><h1>Selector</h1></div>
            <div className="w-[40%] justify-center flex font-bold text-xl"><h1>Possible Drops</h1></div>
          </div>

This is where the problem happens -

          <div className="flex flex-row">

First column

          <div className="grid-cols-3 grid p-3 mt-2 w-[40%]">
            {Inventory.map((val) => (
              <div key={val.IDItem} className="cursor-pointer p-1.5 px-2 m-2 box-content rounded-cool bg-slate-700 
              hover:bg-gray-700 hover:m-0.5 hover:px-3 hover:border-2 hover:border-white-200">
                <img className="" src={`src/images/skins/${val.SkinImage}`} alt={val.SkinImage}/>
                <h1>{val.SkinName}</h1>
                <h1>{val.QualityName}</h1>
                <h1>{val.RarityName}</h1>
                <h1>{val.ItemPrice} Tokens</h1>
              </div>
            ))}
            </div>

Secondary column

            <div className="p-3 mt-2 w-[20%]">
              <div className="cursor-pointer p-1.5 px-2 m-2 box-content rounded-cool bg-slate-700 
                    hover:bg-gray-700 hover:border-2 hover:border-white-200 h-[15rem]
                    transition-all">
                <h1>Placeholder</h1>
              </div>

              <div className="flex flex-auto justify-center">
                <div className="cursor-pointer p-1.5 px-2 m-2 box-content rounded-cool bg-slate-700 
                    hover:bg-gray-700 hover:border-2 hover:border-white-200
                    transition-all">
                  <h1 onClick={() => {inputRefPerc.current.value= 10}}>+10%</h1>
                </div>
                <div onClick={() => {inputRefPerc.current.value= 20}} className="cursor-pointer p-1.5 px-2 m-2 box-content rounded-cool bg-slate-700 
                      hover:bg-gray-700 hover:border-2 hover:border-white-200
                      transition-all">
                  <h1>+20%</h1>
                </div>
                <div onClick={() => {inputRefPerc.current.value= 30}} className="cursor-pointer p-1.5 px-2 m-2 box-content rounded-cool bg-slate-700 
                      hover:bg-gray-700 hover:border-2 hover:border-white-200
                      transition-all">
                  <h1>+30%</h1>
                </div>
              </div>
              <div className="cursor-pointer p-1.5 px-2 m-2 box-content rounded-cool bg-slate-700 
                      hover:bg-gray-700 hover:border-2 hover:border-white-200
                      transition-all flex flex-auto">
                  <h1 className="whitespace-nowrap">Chance: {""}</h1><input ref={inputRefPerc} type="number" min="1" max="100" className=" text-black w-[60px]"></input><h1>{""} %</h1>
              </div>
              <button
                  className=' border-2 border-green-700 bg-green-400 hover:bg-green-600 text-green-900 hover:text-rose-50 w-[100%] h-10 rounded-cool my-2 transition-all'
                >
                  Let's go xd
              </button>
              
            </div>

The third column

            <div className="grid-cols-3 grid p-3 mt-2 w-[40%]">
            {ItemsList.map((val) => (
              <div key={val.IDItem} className="cursor-pointer p-1.5 px-2 m-2 box-content rounded-cool bg-slate-700 
              hover:bg-gray-700 hover:m-0.5 hover:px-3 hover:border-2 hover:border-white-200
              transition-all">
                <img className="" src={`src/images/skins/${val.SkinImage}`} alt={val.SkinImage}/>
                <h1>{val.SkinName}</h1>
                <h1>{val.QualityName}</h1>
                <h1>{val.RarityName}</h1>
                <h1>{val.ItemPrice} Tokens</h1>
              </div>
            ))}
            </div>


          </div>
        </div>
        
      </div>
    );
  }