Freebie User Align

<div class="container-fluid my-5" style="max-width: 900px;">
  <div class="row no-gutters">
    <div class="col-md-7 mb-md-0 mb-3">
      <p class="text-md-left text-center mb-0" style="letter-spacing: 1px;">
        <!------- TOP ADJECTIVES --------------->
        <span class="text-primary">Name</span> &bull;
        <span class="text-primary">Age</span> &bull;
        <span class="text-primary">Gender</span>
      </p>

      <!----------- CONTENT BOX --- will scroll when filled ---------->
      <div class="p-3 bg-faded my-2" style="border-radius: 1em; height: 350px; overflow:auto; font-size: 10pt;">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi varius libero non sem dapibus, eget viverra nisl sagittis. Ut interdum mi non sagittis euismod. Suspendisse id venenatis massa. Aliquam ornare, nibh sit amet interdum elementum, leo sem laoreet nibh, at sollicitudin diam ipsum eu risus. Aenean gravida eu nibh id tincidunt. Pellentesque lorem mauris, cursus sed ligula eget, cursus posuere risus. Phasellus vel enim volutpat, sagittis augue at, condimentum ex.</p>

        <!----- extras ---- you can just erase this if you don't wanna use it ----------->
            <div class="row no-gutters pt-3">
            <!-------- art section ------------->
            <div class="col-md-6 mb-md-0 mb-2">
              <p class="text-muted text-center text-uppercase" style="letter-spacing: 1px;">
                Art <i class="fad fa-pencil-paintbrush fa-fw" />
              </hp>
                <div class="justify-content-between">
                    <span class="text-muted">
                      commissions</span>
                    <i>closed</i>
                </div>
                <hr class="my-2">
                <div class="justify-content-between">
                    <span class="text-muted">
                      trades</span>
                    <i>closed</i>
                </div>
                <hr class="my-2">
                <div class="justify-content-between">
                    <span class="text-muted">
                      requests</span>
                    <i>closed</i>
                </div>
            </div>

            <div class="col-md-6 pl-md-2 mb-2">
              <!------------ trades section ---------------------------------------------------->
              <p class="text-muted text-center text-uppercase" style="letter-spacing: 1px;">
                Trades <i class="fad fa-exchange fa-fw" />
              </p>
                <a href="LINK_HERE" class="btn btn-secondary btn-block btn-sm m-1">Trades</a>
                <a href="LINK_HERE" class="btn btn-secondary btn-block btn-sm m-1">Sales</a>
                <a href="LINK_HERE" class="btn btn-secondary btn-block btn-sm m-1">Wishlist</a>
            </div>
          </div><!---- end extras ----------->

      </div>

      <!---- BOTTOM LINKS --- dont forget to fill these in --- can swap the icons, they are "font awesome" ---->
      <p class="text-md-right text-center mb-0" style="letter-spacing: 1px;">
        <a href="DA_LINK" target="_BLANK"><i class="fab fa-deviantart fa-fw" /></a>
        <a href="FA_LINK" target="_BLANK"><i class="fas fa-paw fa-fw" /></a>
        <a href="TWITTER_LINK" target="_BLANK"><i class="fab fa-twitter fa-fw" /></a>
        <a href="TWITCH_LINK" target="_BLANK"><i class="fab fa-twitch fa-fw" /></a>
        <!------ credit ------ please leave this --------------->
        <a href="/Pinky" target="_BLANK"><i class="fas fa-code fa-fw" /></a>
      </p>
    </div>

    <div class="col-md-5">
      <div class="h-100 w-100 d-flex"><div class="w-100 my-auto">
          <!-------- side page doll ----- will auto size and center itself --------->
          <img src="IMG_URL"
          title="art by USERNAME @ SITE"
          style="max-height: 450px;" class="d-block mx-auto tooltipster">
      </div></div>
    </div>
  </div>
</div>