HELP: Can't get layout to look right - ☔︎ ∙ I need Help!

I'm making a page for one of my OCs right now and I just can't get the layout to look how I want it to

I want it to look like this:

With the OC on the left and a box containing a bio about them on the right. I have the box and the image, that's easy enough, but the box is at the character's feet instead of level with their head and I can't quite get them to be centered. Any help is very much appreciated!

Oh, and this is the code I have already:

Code

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>~credits~</title>

        <!-- favicon -->
        <link rel="icon" type="image/x-icon" href="img/mini_icon.png">

    </head>

    <body>

      <header>
        <a href="/ocs/index.html"><img src="https://cdn.discordapp.com/attachments/1115206156114214962/1119649894249009222/backd8.gif" alt="Back" height="20px" width=auto></a>
      </header>

      <div class="oc">

        <img src="https://cdn.discordapp.com/attachments/1117574458266370148/1117771364498149487/CruzFullbody.png" width="500px" height=auto alt="A fullbody image of Cruz. They have dark skin, green eyes and braids. They're wearing an orange jumper, overalls and pink Converse. Their posture is relaxed and they have one hand raised in a peace sign.">

      </div>

      <div class="box">

        <br>

        <h1>Cruz</h1>

        <p>This is Cruz</p>

        <br>

      </div>

      <style>

        body{
            background-image: linear-gradient(#b2f7ef, #f7d6e0);
            background-repeat: no-repeat;
            background-size: cover;
            font-size: 16px;
            color: #9F2B68;
        }

        .box{
          display: inline-block;
          background-color: pink;
          border: 3px solid #9F2B68;
          min-width: 750px;
        }

        .oc{
          display: inline-block;
          margin-bottom: 75px;
        }

        p {
          margin-right: 25px;
          margin-left: 25px;
        }

        a:link {
            color: #9F2B68;
        }

        a:visited {
            color: #9F2B68;
        }

        a:hover {
            color: #9F2B68;
        }

        a:active {
            color: #9F2B68;
        }

      </style>

    </body>

</html>

Vaguely similar topics! (3)