[Vuejs]-Aligning the contents of my footer properly

Using flexbox is the best solution to your question. You can simply use it. The example in codepen shows how can you make such a footer. In the example, I used flexbox, since it is the most promising display layout method. There are many rules supported by most modern browsers in flexbox. Make use of it and simply make whatever you want. All the best

HTML Code:-

<div class='container'>
  <ul class="list">
    <li class="list-heading">One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>six</li>
    <li>Seven</li>
    <li>Eight</li>
  </ul>
  <ul class="list">
    <li class="list-heading">One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
  </ul>
  <ul class="list">
    <li class="list-heading">One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>six</li>
    <li>Seven</li>
    <li>Eight</li>
  </ul>
</div>

CSS:-

.container {
  display: flex;
  max-width: 600px;
  border: 1px solid #ddd;
}
.list {
  flex-grow: 1;
  padding-left: 20px;
  list-style: none;
  border-left: 1px solid #ddd;
}
.list-heading {
  font-size: 18px;
  font-weight: bold;
}