JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outercontainer group"> 
      <div class="dividing-row span_1_of_2 col"> 
          <p><code>&lt;p&gt;</code> element -  here is some text </p>      
          <aside>&bullet;<code> &lt;aside&gt;</code> element: not a flexbox, and had no height;<br>&bullet; for the ordered list of social media icons (black border) to stick to the bottom of the "containing" div (which container?), you need to give this box (yellow) a full height, then make the ordered list a (nested) flexbox with full height, as well. </span>
              <ol class="category-name">
                <li><a><i class="fa fa-pinterest-p">SOCIAL MEDIA ICON 1</i></a></li>
                <li><a><i class="fa fa-flickr">SOCIAL MEDIA ICON 2</i></a></li>
              </ol>
           </aside>      
      </div>
</div>

CSS

/* main flex container; green border */
.outercontainer {
    display: flex;
    flex-wrap: wrap;
    height: 80vh; /* new: height = viewport height */
    border: 15px solid lightgreen; /* for demo purposes */
}

/* red border */
.dividing-row {
    height: calc(80vh - 30px); /* viewport height less borders */
    width: 100%;
    border: 15px solid red;
}

/* blue border */
p {
    margin: 0;
    border: 15px solid aqua;
}

/* yellow border */
aside {
    margin: 0;
    border: 15px solid yellow;
    height: 57vh; /* viewport height less borders and content */
}

/* black border */
.category-name {
    /* display: inline-block; */
    display: flex;
    align-items: flex-end;
    height: 41vh;  /* viewport height less content */
    list-style: none; /* remove bullet points */
    border: 1px solid black;
     /* color: #FFF; */
    /* align-self: flex-end!important;  IGNORED BY BROWSER; <ol> not a flex item */
}

.category-name > li {
    border: 1px dashed red;
    margin: 5px;
    padding: 5px;
}