JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="left-col">
    <div class="para">
      <p>what</p>
      <p>we</p>
      <p>do</p>
    </div>
  </div>
  <div class="right-col">
    <ul class="functions">
      <li class="icon-1">
        <h4>Web design</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, </p>
      </li>
      <li class="icon-2">
        <h4>UI/UX design</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, </p>
      </li>
      <li class="icon-3">
        <h4>photography</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, </p>
      </li>
      <li class="icon-4">
        <h4>app development</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, </p>
      </li>
    </ul>
  </div>
</div>

SCSS

body {
  font-family: "HelveticaNeue-Thin",sans-serif;
}

.container {
  position: relative;
  overflow: auto;
}

.left-col {
  position: absolute;
  width: 50%;
  height: 100%;
  float: left;
  text-align: center;
  &::before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }
}

.para {
   color: #e1e1e1;
   font-size: 98.43px;
   font-weight: 700;
   display: inline-block;
   vertical-align: middle;
   p {
     padding: 0;
     margin: 0;
     line-height: 1em;
     text-align: center;
   }
}

.right-col {
  width: 50%;
  float: right;
}