I have two separate lists (however I'm open for an example on how to just have one). The first list is information (such as 'title', 'length' 'release date') and the second list is the answers to the information (such as '50 Shades of Grey', '50 minutes' and '2015').

Here is my desired output and as you can see, the answers to the information is vertically centered under the information:

(Note there could be more information such as members of the cast, the budget e.g)

I have tried using Flex however the two lists are displayed separately on top of each other:

ul {
   white-space:nowrap;
}

li {
   display: flex;
   justify-content: center;
   flex-direction: column;
   text-align: center;
}

<ul>
<li>Title</li>
<li>Length</li>
<li>Release Date</li>
</ul>
<ul>
<li>50 Shades of Grey</li>
<li>50 minutes</li>
<li>2015</li>
</ul>

You can use CSS table-layout for this. You have to set display: table-row on ul and display: table-cell on li. Also you should add text-align: center on li.

ul {
  display: table-row;
}

li {
  display: table-cell;
  text-align: center;
  padding: 10px 20px;
}

<ul>
  <li>Title</li>
  <li>Length</li>
  <li>Release Date</li>
</ul>
<ul>
  <li>50 Shades of Grey</li>
  <li>50 minutes</li>
  <li>2015</li>
</ul>

You can also use Flexbox for this you just have to set flex: 1 on each li. This will work if you have equal number of li's in each ul, if not use table-layout.

ul {
  display: flex;
  list-style: none;
}

li {
  flex: 1;
  text-align: center;
}

<ul>
  <li>Title</li>
  <li>Length</li>
  <li>Release Date</li>
</ul>
<ul>
  <li>50 Shades of Grey</li>
  <li>50 minutes</li>
  <li>2015</li>
</ul>

more