How to left/right align elements but also adjust vertical height

Question

I tried many things like floating my elements and vertical aligning and it's not working; basically I am trying to have 10 p elements inside of a box, one half on the left side of the box, and one half on the right side of the box. But instead what happens is that when I get to the fifth element, it doesn't revert back to the top even when I add 'vertical-align: text-top' to it.

Does anybody know how to align this? Also what if I were to change it to li elements? Would that change things up, because I'm thinking about simply bulleting them; would look nicer.

.TargetBox {
  width: 70%;
  margin: auto;
  height: 300px;
  background-color: black;
  color: #66ff33;
  border-radius: 5px;
  text-align: center;
  margin-bottom: 40px;
}
.Explainer {
  width: 70%;
  height: 300px;
  margin: auto;
  background-color: black;
  color: #66ff33;
  text-align: center;
  border-radius: 5px;
}
.leftColumn {
  text-align: left;
  vertical-align: text-top;
}
.rightColumn {
  text-align: right;
  vertical-align: text-top;
}

<div class="TargetBox">
  <h1> Target Box </h1>
  <p class="leftColumn">one:</p>
  <p class="leftColumn">two:</p>
  <p class="leftColumn">three:</p>
  <p class="leftColumn">four:</p>
  <p class="rightColumn">five:</p>
  <p class="rightColumn">six:</p>
  <p class="rightColumn">seven:</p>
  <p class="rightColumn">eightt:</p>
  <p class="rightColumn">nine:</p>
  <p class="rightColumn">10:</p>
</div>

Answer 1

you could use float and clear :

.TargetBox {
  width: 70%;
  margin: auto;
  height: 300px;
  background-color: black;
  color: #66ff33;
  border-radius: 5px;
  text-align: center;
  margin-bottom: 40px;
}
.Explainer {
  width: 70%;
  height: 300px;
  margin: auto;
  background-color: black;
  color: #66ff33;
  text-align: center;
  border-radius: 5px;
}
.leftColumn {
  text-align: left;
  vertical-align: text-top;
  float:left;
  clear:left;
}
.rightColumn {
  text-align: right;
  vertical-align: text-top;
  overflow:hidden;
}

<div class="TargetBox">
  <h1> Target Box </h1>
  <p class="leftColumn">one:</p>
  <p class="leftColumn">two:</p>
  <p class="leftColumn">three:</p>
  <p class="leftColumn">four:</p>
  <p class="rightColumn">five:</p>
  <p class="rightColumn">six:</p>
  <p class="rightColumn">seven:</p>
  <p class="rightColumn">eightt:</p>
  <p class="rightColumn">nine:</p>
  <p class="rightColumn">10:</p>
</div>