Photo caption not lining up under photo (html, CSS)

Newbie question: I'm trying to put a photo on the right side of a website, have the text wrap around on the left, and have a photographer credit directly under the photo.

The credit is showing up on the left side above the text header instead of under the photo on the right.

Here's my html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8'/>
    <link rel='stylesheet' href='test.css'/>
  </head>
  <body>
    <picture>
      <img class='pic' src='images\str_pic1.JPG' alt="Person in blue shirt" />
      <figcaption class='pic'>Photo Credit: Photographer</figcaption>
    </picture>
    <div>
      <h2>Title</h2>
      <p>Text text text etc. this is the text body</p>
    </div>
  </body>
</html>

Here's my CSS:

.page {
  font-size: 100%;
  background-color: #777;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.pic {
  width: 35%;
  float: right;
  margin-left: 20px;
}

I tried putting the pic and credit in a div box & using:

.pic-box {
  display: flex;
  flex-direction: column;
}

in the CSS. This did not work.

First time asking a question here, please let me know if I can improve!

Solution

I believe this is what you want. I replaced your <picture> and figcaption with div. Divs are very easy to work with. I then gave the wrapping div (which was formerly <picture> the class of picwrapand then the former figcaption div a class of piccap simply to make it not the same class as the picture which is pic.

I then added this to your CSS:

.picwrap {
  float: right;
  text-align: center;
}

.pic {
  max-width: 35vw;
}

Here's a working example with a picture I added as well as gave it mroe text so you can see the wrapping.

.page {
  font-size: 100%;
  background-color: #777;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.picwrap {
  float: right;
  text-align: center;
}

.pic {
  max-width: 35vw;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8'/>
    <link rel='stylesheet' href='test.css'/>
  </head>
  <body>
    <div class="picwrap">
      <img class='pic' src='https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2F3.bp.blogspot.com%2F-h0-QmJgoc0A%2FUynUaTP3h1I%2FAAAAAAAACOI%2FrmJPmSiM388%2Fs1600%2Fjavanes2.jpg&f=1&nofb=1&ipt=2d9c6496df9f3008cb82378322a186661b08e10918f56fd1458cf7d8db784cfe&ipo=images' alt="Person in blue shirt" />
      <div class='piccap'>Photo Credit: Photographer</div>
   </div>
    <div>
      <h2>Title</h2>
      <p>Text text text etc. this is the text body   Text text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text body</p>
    </div>
  </body>
</html>