JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<footer>
  <div class="container">
    <p>
    &copy; 2019 Company Name. All rights reserved.
    </p>
    <ul>
      <li><a href="#"><i class="fab fa-facebook"></i></a></li>
      <li><a href="#"><i class="fab fa-instagram"></i></a></li>
      <li><a href="#"><i class="fab fa-twitter"></i></a></li>
    </ul>
    <ul>
      <li><a href="#">Legal</a></li>
      <li><a href="#">Privacy</a></li>
    </ul>
  </div>
</footer>
<div id="border">

</div>

CSS

footer {
  background: #666;
  z-index: 1;
}
footer .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1em;
}
ul {
  display: flex;
  list-style: none;
}
ul li {
  padding: 0 0.5em;
}
#border {
  position: absolute;
  left: 50%;
  height: 100vh;
  border: 1px solid red;
  width: 1px;
  z-index: 2;
}