Flex wrap around image

I'm trying to position the second text element in this picture but I can't seem to be able to do it.

The current arrangement is like this:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.crew-member-card {
  width: 400px;
  background-color: #292929;
  padding-top: 15px;
  border-radius: 8px;
  margin: 10px;
  margin-top: 0;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.name-and-profile-picture {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

.pfp {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.userNames {
  font-size: 30px;
  font-weight: 900;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.pronouns-position {
  color: #c7c7c7;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.pronouns-position>* {
  margin-right: 5px;
}

<!-- language: lang-html -->

<div class="crew-member-card">
  <div class="name-and-profile-picture">
    <p><img :src="getProfilePicture(user)" class="pfp"></p>
    <h3 class="userNames">{{ user.FirstName }} {{ user.LastName }}</h3>
    <div class="pronouns-position">
      <p class="pronouns" v-if="user.memberInfo.pronouns != 'Unset'">
        <font-awesome-icon icon="fa-solid fa-user" /> {{ user.memberInfo.pronouns.toLowerCase() }}</p>
      <p class="division-dot" v-if="user.memberInfo.pronouns != 'Unset'"> • </p>
      <p class="position">{{ user.memberInfo.position.toLowerCase() }}</p>
    </div>
  </div>
</div>

<!-- end snippet -->

It results in the text going all the way under the image, rather than under the text and beside the image

Grid is by far the best way to arrange this sort of layout. To get you started here's a few resources:

• CSS tricks - a complete guide to grid
• Kevin Powell - Learn CSS the easy way
• Kevin Powell - Get started with grid without being overwhelmed
• W3Schools - Grid Module
• Learn CSS Grid - does what it says
• MDN - Grid

Your layout using grid can be seen below. I've annotated the pertinent bits:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #191919;
}

.crew-member-card {
  width: 400px;
  background-color: #292929;
  padding-top: 15px;
  border-radius: 8px;
  margin: 10px;
  margin-top: 0;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.name-and-profile-picture {
  display: grid;
  grid-template-columns: 1fr 1fr; /* have 2 columns and make them the same width. This will mean the pronouns section will automatically fall on to the next row down*/
  align-items: center;
  justify-items: center; /* added this */
  /*flex-wrap: wrap; removed this */
}

.pfp {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.userNames {
  color: #E6E6E6;
  font-size: 30px;
  font-weight: 900;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.pronouns-position {
  color: #c7c7c7;
  grid-column: span 2; /* this spans 2 columns to make it full width */
  display: flex; /* make the child elements appear side by side */
  justify-content: center; /* and in the center */
}

.pronouns-position>* {
  margin-right: 5px;
}

<!-- language: lang-html -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="crew-member-card">
  <div class="name-and-profile-picture">
    <p><img src="https://placekitten.com/200/200" class="pfp"></p>
    <h3 class="userNames">Felix Cat</h3>
    <div class="pronouns-position">
      <p class="pronouns" v-if="user.memberInfo.pronouns != 'Unset'">
        <i class="fa-solid fa-user"></i> pronouns
      </p>
      <p class="division-dot" v-if="user.memberInfo.pronouns != 'Unset'"> • </p>
      <p class="position">Position</p>
    </div>
  </div>
</div>

<!-- end snippet -->