CSS列表项目会受到其他列表中文本的影响

Question

解决方案：垂直对齐：顶部；

当我制作这些列表项时，我希望它们在水平方向上对齐，但是一旦我的文字大于1行，它似乎就会抵消其余部分。我要准备一个响应式的块网格，每个块都有标题和简短描述，您可以从代码中看到。

.classes {
  display: table;
  list-style-type: none;
}

.classli {
  position: relative;
  margin: 20px;
  display: inline-block;
  width: 250px;
  height: 200px;
  border: 2px solid #ccc;
  background-color: white;
  border-radius: 7px;
}

.classheader {
  padding: 10px;
  font-size: 18px;
  border-bottom: 1px solid #ccc;
}

.classannouncements {
  padding-left: 7px;
}

<ul class="classes">
  <li class="classli">
    <p class="classheader">Class 1</p>
    <p class="classannouncements">3 active assignments, if you'd like to view them please click on this class</p>
  </li>
  <li class="classli">
    <p class="classheader">Class 2</p>
    <p class="classannouncements">You're all caught up!</p>
  </li>
  <li class="classli">
    <p class="classheader">Class 3</p>
    <p class="classannouncements">You're all caught up!</p>
  </li>