Quite Long-Winded

<div class="container">
  <div class="card rounded-0 bg-faded p-2 mb-2">
    <div class="row no-gutters">

      <div class="col-4 p-1 pr-2">
      <div class="card h-100 rounded-0 border-0" style="background: url(https://via.placeholder.com/500) center;"></div>
      </div>

      <div class="col-8 p-1">

      <div class="card w-100 rounded-0 card-faded mb-3">
        <h2 class="text-uppercase text-center p-3 mb-0" style="letter-spacing:5px;font-size:1rem;">
            ABOUT
        </h2>
      </div>

      <div class="text-center mb-3" style="letter-spacing:5px;"><em>
          <i class="fal fa-quote-left fa-xs"></i>&nbsp;&nbsp;&nbsp;
                    QUOTE_GOES_HERE
          &nbsp;&nbsp;&nbsp;<i class="fal fa-quote-right fa-xs"></i></em>
      </div>
      <div><hr class="mx-5 mb-3" style="border-faded;border-width:1px 0 0;"></div>

      <div class="table-responsive">
            <table class="table table-hover p-2 border-0" style="letter-spacing:1px;font-size:.75rem;">

              <!---- Add or remove rows as you please! The image to the left will scale accordingly. ---->
              <tr class="row">
                <td class="col-lg-3 col-sm-6 font-weight-bold text-right text-uppercase">Name</td>
                  <td class="col-lg-3 col-sm-6 text-left text-muted">CONTENT</td>
                  <td class="col-lg-3 col-sm-6 font-weight-bold text-right text-uppercase">Age</td>
                  <td class="col-lg-3 col-sm-6 text-left text-muted">CONTENT</td>
              </tr>

              <tr class="row">
                <td class="col-lg-3 col-sm-6 font-weight-bold text-right text-uppercase">gender/pronouns</td>
                  <td class="col-lg-3 col-sm-6 text-left text-muted">CONTENT</td>
                  <td class="col-lg-3 col-sm-6 font-weight-bold text-right text-uppercase">orientation</td>
                  <td class="col-lg-3 col-sm-6 text-left text-muted">CONTENT</td>
              </tr>

              <tr class="row">
                <td class="col-lg-3 col-sm-6 font-weight-bold text-right text-uppercase">ht/wt/build</td>
                  <td class="col-lg-3 col-sm-6 text-left text-muted">CONTENT</td>
                  <td class="col-lg-3 col-sm-6 font-weight-bold text-right text-uppercase">species/race</td>
                  <td class="col-lg-3 col-sm-6 text-left text-muted">CONTENT</td>
              </tr>

              <tr class="row">
                <td class="col-lg-3 col-sm-6 font-weight-bold text-right text-uppercase">designer</td>
                  <td class="col-lg-3 col-sm-6 text-left text-muted">CONTENT</td>
                  <td class="col-lg-3 col-sm-6 font-weight-bold text-right text-uppercase">worth</td>
                  <td class="col-lg-3 col-sm-6 text-left text-muted">CONTENT</td>
              </tr>

              <tr class="row">
                <td class="col-lg-3 col-sm-6 font-weight-bold text-right text-uppercase">code by</td>
                  <td class="col-lg-3 col-sm-6 text-left text-muted">@teratoma</td>
                  <td class="col-lg-3 col-sm-6 font-weight-bold text-right text-uppercase">inspired by</td>
                  <td class="col-lg-3 col-sm-6 text-left text-muted">@vomco</td>
              </tr>

            </table>
          </div>

      </div>

    </div>
  </div>

<div id="collapse1" class="w-100 panel-collpase collapse">

  <div class="card w-100 rounded-0 bg-faded">
    <div class="row no-gutters justify-content-between p-1">
      <!---- Make sure to include the fa-2x when copy-pasting font icons to get the larger size! ---->
      <div class="col-2 p-2"><div class="card w-100 rounded-0 p-3" style="background:#0059B3;"><i class="fas fa-candle-holder fa-2x"></i></div></div>
      <div class="col-2 p-2"><div class="card w-100 rounded-0 p-3" style="background:#3592CC;"><i class="far fa-fireplace fa-2x"></i></div></div>
      <div class="col-2 p-2"><div class="card w-100 rounded-0 p-3" style="background:#BBEEEB;"><i class="far fa-fire-alt fa-2x"></i></div></div>
      <div class="col-2 p-2"><div class="card w-100 rounded-0 p-3" style="background:#F8D086;"><i class="far fa-fire-smoke fa-2x"></i></div></div>
      <div class="col-2 p-2"><div class="card w-100 rounded-0 p-3" style="background:#E89A5E;"><i class="far fa-smoke fa-2x"></i></div></div>
      <div class="col-2 p-2"><div class="card w-100 rounded-0 p-3" style="background:#56190E;"><i class="far fa-campfire fa-2x"></i></div></div>
    </div>
  </div>

  <div class="card w-100 p-2 rounded-0 bg-faded mt-2">
    <div class="row no-gutters p-1">
      <div class="card w-100 rounded-0 card-faded mb-2">
        <h2 class="text-uppercase text-center p-3 mb-0" style="letter-spacing:5px;font-size:1rem;">
            APPEARANCE
        </h2>
      </div>

      <div class="table-responsive text-muted px-2" style="height:300px;">
            <p>Curabitur egestas, sapien in auctor vestibulum, elit quam interdum ex, vel rutrum magna eros vitae urna. Aenean est ligula, sodales dictum enim at, luctus mattis odio. Duis consectetur, diam vitae elementum maximus, purus lorem consequat sem, et varius ipsum leo in nunc. Nulla leo elit, sagittis vel dolor eu, fermentum volutpat tortor. Donec a nisl nisi.</p>
            <ul class="m-0 mt-2">
              <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
              <li>Praesent non ipsum venenatis, scelerisque mi sed, varius nisl.</li>
              <li>Curabitur egestas, sapien in auctor vestibulum, elit quam interdum ex, vel rutrum magna eros vitae urna.</li>
              <li>Cras turpis ex, cursus sed lacus vel, congue gravida dui.</li>
              <li>Pellentesque sapien dolor, congue id sagittis id, ullamcorper in enim. Nunc pulvinar posuere sapien sit amet porta.</li>
            </ul>
      </div>

      <div class="col-8 pr-3 py-3">
        <div class="card w-100 rounded-0 card-faded mb-2">
        <h2 class="text-uppercase text-center p-3 mb-0" style="letter-spacing:5px;font-size:1rem;">
            BACKSTORY
        </h2>
        </div>

        <div class="table-responsive text-muted p-2" style="height:300px;">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in porta sapien. Ut interdum hendrerit tincidunt. Praesent non ipsum venenatis, scelerisque mi sed, varius nisl. Sed eget risus sit amet mi suscipit aliquet. Curabitur interdum semper orci, id imperdiet diam accumsan eget.</p>
          <p>Curabitur egestas, sapien in auctor vestibulum, elit quam interdum ex, vel rutrum magna eros vitae urna. Aenean est ligula, sodales dictum enim at, luctus mattis odio. Duis consectetur, diam vitae elementum maximus, purus lorem consequat sem, et varius ipsum leo in nunc. Nulla leo elit, sagittis vel dolor eu, fermentum volutpat tortor. Donec a nisl nisi.</p>
          <p>Cras turpis ex, cursus sed lacus vel, congue gravida dui. Pellentesque sapien dolor, congue id sagittis id, ullamcorper in enim. Nunc pulvinar posuere sapien sit amet porta. Nulla finibus molestie elit, et interdum ligula. Vivamus commodo, tortor elementum pharetra viverra, quam magna hendrerit risus, et viverra mi ligula sit amet urna.</p>
        </div>
      </div>

      <div class="col-4 py-3">
        <div class="card w-100 rounded-0 card-faded mb-2">
        <h2 class="text-uppercase text-center p-3 mb-0" style="letter-spacing:5px;font-size:1rem;">
            TRIVIA
        </h2>
        </div>

        <div class="table-responsive text-muted p-2" style="height:300px;">
            <ul class="m-0">
              <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
              <li>Praesent non ipsum venenatis, scelerisque mi sed, varius nisl.</li>
              <li>Curabitur egestas, sapien in auctor vestibulum, elit quam interdum ex, vel rutrum magna eros vitae urna.</li>
              <li>Cras turpis ex, cursus sed lacus vel, congue gravida dui.</li>
              <li>Pellentesque sapien dolor, congue id sagittis id, ullamcorper in enim. Nunc pulvinar posuere sapien sit amet porta.</li>
            </ul>
        </div>

      </div>

    </div>
  </div>

</div>
  <a data-toggle="collapse" href="#collapse1" class="btn btn-faded btn-block rounded-0 text-muted text-center p-2 my-2">
   <i class="fal fa-chevron-circle-down"></i>
  </a>
</div>