MODULAR: Oekaki Species 1.0

 <!-- OEKAKI SPECIES START
To add a new pair of label+answer add:
    <div class="p-1 d-flex justify-content-between mb-1">
   <span class="text-uppercase text-white">Label
    </span>Answer
   </div>
This bit of code:
    <div class="col-md-6 col-sm-12">
Is where the top of the two columns is. Don't delete it but that's what it is if you're trying to keep things even.
The line between sections is:
   <hr class="bg-white w-100">
The version that's hidden until the screen is too small to have two columns is this one:
    <hr class="bg-white w-100 hidden-md-up">
-->
  <div class="row">
    <div class="col-12 p-2">
      <div class="text-light bg-dark p-3">
        <div class="text-uppercase d-flex justify-content-between" style="letter-spacing:3px; font-size:20px;">
          Species Info
        </div>
        <hr class="bg-white w-100">
        <div class="p-1">
          <div class="row">
            <div class="col-md-6 col-sm-12">
              <div class="p-1 d-flex justify-content-between mb-1">
                <span class="text-uppercase text-white">Original Post
                </span>
                <a class="text-muted" href="URL HERE">??????
                </a>
              </div>
              <div class="p-1 d-flex justify-content-between mb-1">
                <span class="text-uppercase text-white">Growth
                </span>
                <a class="text-muted" href="URL HERE">?????
                </a>
              </div>
              <div class="p-1 d-flex justify-content-between mb-1">
                <span class="text-uppercase text-white">Latest Ref
                </span>
                <a class="text-muted" href="URL HERE">?????
                </a>
              </div>
              <div class="p-1 d-flex justify-content-between mb-1">
                <span class="text-uppercase text-white">Obtained
                </span>
                <a class="text-muted" href="URL HERE">?????
                </a>
              </div>
              <hr class="bg-white w-100">
              <div class="p-1 d-flex justify-content-between mb-1">
                <span class="text-uppercase text-white">Slot no. 1
                </span>
                <a class="text-muted" href="URL HERE">?????
                </a>
              </div>
              <div class="p-1 d-flex justify-content-between mb-1">
                <span class="text-uppercase text-white">Slot no. 2
                </span>
                <a class="text-muted" href="URL HERE">?????
                </a>
              </div>
              <div class="p-1 d-flex justify-content-between mb-1">
                <span class="text-uppercase text-white">Slot no. 3
                </span>
                <a class="text-muted" href="URL HERE">?????
                </a>
              </div>
              <hr class="bg-white w-100 hidden-md-up">
            </div>
            <div class="col-md-6 col-sm-12">
              <div class="p-1 d-flex justify-content-between mb-1">
                <span class="text-uppercase text-white">Traits
                </span>
              </div>
              <!-- TRAIT LIST START
To add another tier you need to copy all this:
    <li>
    <em>Tier Rank</em>
    <ul>
    <li>Trait 1</li>
    <li>Trait 2</li>
    </ul>
    </li>
To add traits you need to add new <li></li> INSIDE the <ul></ul>
-->
              <ul>
                <li>
                  <em>Non-Rarity</em>
                  <ul>
                    <li>Trait 1</li>
                    <li>Trait 2</li>
                  </ul>
                </li>
                <li>
                  <em>Standard</em>
                  <ul>
                    <li>Trait 1</li>
                    <li>Trait 2</li>
                  </ul>
                </li>
                <li>
                  <em>Common</em>
                  <ul>
                    <li>Trait 1</li>
                    <li>Trait 2</li>
                  </ul>
                </li>
                <li>
                  <em>Uncommon</em>
                  <ul>
                    <li>Trait 1</li>
                    <li>Trait 2</li>
                  </ul>
                </li>
                <li>
                  <em>Rare</em>
                  <ul>
                    <li>Trait 1</li>
                    <li>Trait 2</li>
                  </ul>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- OEKAKI SPECIES END -->