Align Line number to Code snippet Vite React js

Question

I'm new in Vite react js also with tailwind and its hard to deal with css to design my web app. In these problem, I'm trying to create a code snippet with a line number but it's hard to align these two Here is my code

export const Democode = () => {
  const codeSnippet = `let name = prompt("What's your name?");
console.log("Hello, " + name + "!Welcome to our website.");`;

  return (
    <div className=" bg-slate-100 rounded-lg p-10">
      <pre className="col-span-2" style={{ position: "relative" }}>
        <div
          style={{
            fontSize: "20px",
            position: "absolute",
            left: 0,
            top: 0,
            bottom: 0,
            width: "1em",
            textAlign: "left",
            userSelect: "none",
            pointerEvents: "none",
            color: "rgba(0,0,0,.5)",
            paddingRight: "0.5em",
            paddingTop: "0.6em",
            paddingLeft: "2em",
          }}
        >
          {codeSnippet.split("\n").map((_, i) => (
            <span
              key={i}
              style={{ display: "block", counterIncrement: "line-number" }}
            >
              {i + 1}
            </span>
          ))}
        </div>
        <code
          style={{ fontSize: "20px", paddingLeft: "4em", textAlign: "left" }}
          dangerouslySetInnerHTML={{
            __html: Prism.highlight(
              codeSnippet,
              Prism.languages.javascript,
              "javascript"
            ),
          }}
        />
      </pre>
    </div>
  );
};

This is the output

To learn and fix my problem