JSFiddle - React, Tailwind, and code Playground

HTML

<div class="col-1of2 resources-section">
            <div class="col-1of2 small-col-title resources">
                <a href="#">
                    <h3>Resources</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porta, orci id mollis luctus, magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porta, orci id mollis luctus, magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porta, orci id mollis luctus, magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porta, orci id mollis luctus, magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porta, orci id mollis luctus, magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porta, orci id mollis luctus, magna.</p>
                </a>
            </div>
            <div class="col-1of2 resources-links">
                <div class="col-1of1">
                    <a href="#">Document Library</a>
                </div>
                <div class="col-1of1">
                    <a href="#">Consultations</a>
                </div>
                <div class="col-1of1">
                    <a href="#">Newsletters</a>
                </div>
                <div class="col-1of1">
                    <a href="#">Presentations</a>
                </div>
            </div>
        </div>

SCSS

.resources-section {
  display: flex;
  background:red;

  .resources-links {
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    .col-1of1 {
      height: 25%;
      display: flex;

      a {
        display: block;
        margin: auto;
      }
    }
  }
}

.resources-links {
  background: yellow;
  
  .col-1of1 {
    background:blue;
    
    a {
      color: #ffffff;
      }
  }
}