如何左/右对齐元素，但也调整垂直高度

Question

我尝试了很多东西，例如浮动我的元素和垂直对齐，它不起作用;基本上我试图在一个盒子里面放10个p元素，一半放在盒子的左边，另一半放在盒子的右边。但相反，当我到达第五个元素时，即使我向其添加“vertical-align：text-top”，它也不会恢复到顶部。

有人知道如何对齐吗？如果我要把它改成li元素呢？这会改变吗，因为我正在考虑简单地制造它们;会看起来更好。

.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

你可以使用float并清除：

.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>