Content won't move to assigned grid areas (only some of it)

https://i.sstatic.net/z2yC7.png This is what my grid looks like at the moment. Changing the picture position worked. pfp-div but I want to change the text position profile-p-name-div, and its not working. (I want to move DIV containers that are inside a bigger DIV container). (all the smaller div containers have a red border so you can see them, and the biggest DIV has a blue border)

Here's what I have now:

.profile-preview-div {
  display: inline-block;
  border-color: blue;
  border-style: solid;
  border-radius: 20px;
  display: grid;
  grid-template-columns: 20% 40% 40%;
  grid-template-rows: repeat(3, 40px);
  width: 200px;
  zoom: 2;
}

.pfp-div {
  border-color: red;
  border-style: solid;
  border-radius: 5px;
  width: 35px;
  height: 39px;
  margin: 0;
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

.pfp-preview {
  width: 100%;
  border-radius: 50px;
  border-color: black;
  border-style: solid;
}

.profile-p-name-div {
  display: inline-block;
  margin: 0px;
  border-color: red;
  border-style: solid;
  border-radius: 5px;
  font-size: 10px;
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

.profile-p-name {
  margin: 0px;
}

.profile-p-desc {
  margin: 0px;
  font-size: 8px;
  color: grey;
}

.profile-p-desc-div {
  border-color: red;
  border-style: solid;
}

.profile-p-stats-div {
  border-color: red;
  border-style: solid;
  border-radius: 5px;
  position: relative;
}

.profile-p-stats {
  margin: 0px;
  font-size: 8px;
  display: inline-block;
  color: navy;
}

.profile-p-info {
  border-color: red;
  border-style: solid;
  border-radius: 5px;
  width: 80%;
}

<!doctype html>

<html>

<head>
  <title>
    Javascript idk
  </title>
  <script src="java.js"></script>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="profile-preview-div">
    <div class="pfp-div">
      <img src="/pfps/pic1.png" class="pfp-preview">
    </div>
    <div class="profile-p-info">
      <div class="profile-p-name-div">
        <p class="profile-p-name">asd_adventure</p>
      </div>
      <div class="profile-p-desc-div">
        <p class="profile-p-desc">i really like pizza lol</p>
      </div>
      <div class="profile-p-stats-div">
        <p class="profile-p-stats">Followers: 40</p>
        <p class="profile-p-stats">Following: 30</p>
      </div>
    </div>
    <script>
    </script>
</body>
</html>

as you can see i tried moving it to the middle, but its not working. I dont know whats wrong, as i did the same for the picture and it moved where i wanted it to

Solution

<div class="profile-preview-div">
  <div class="pfp-div"/>

  <div class="profile-p-info">
    <div class="profile-p-name-div">

.profile-p-name-div is not a direct child of your grid, so can't be positioned in the grid.

You could try using subgrid on .profile-p-info - but it's not quite ready in all browsers.

So, I'd just unwrap the contents of .profile-p-info