正如您所说，时间线的上方文本是动态的，因此我将height设置为.point，例如60px，并将align-items:flex-end设置为.timeline。
希望对你有帮助。

.filters-container {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-left: 3px;
}

.timeline {
  list-style-type: none;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.li {
  transition: all 200ms ease-in;
}

.timestamp {
  margin-bottom: 20px;
  padding: 0px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 20;
}

.point {
  padding: 0px 40px;
  display: flex;
  justify-content: center;
  border-top: 2px solid #D6DCE0;
  position: relative;
  transition: all 200ms ease-in;
  padding-top: 1em;
  height: 60px;
text-align: center;
}

.point h5 {
  font-weight: 600;
}

.point:before {
  content: '';
  width: 25px;
  height: 25px;
  background-color: white;
  border-radius: 25px;
  border: 1px solid #ddd;
  position: absolute;
  top: -15px;
  left: 42%;
  transition: all 200ms ease-in;
}

.li.complete .point {
  border-top: 2px solid #464DE4;
}

.li.complete .point:before {
  background-color: #464DE4;
  border: none;
  transition: all 200ms ease-in;
}

.li.complete .point h5 {
  color: #464DE4;
}

.timeline::before {
  background-color: transparent;
}

@media (min-device-width: 320px) and (max-device-width: 700px) {
  .timeline {
    list-style-type: none;
    display: block;
  }
  .li {
    transition: all 200ms ease-in;
    display: flex;
    width: inherit;
  }
  .timestamp {
    width: 100px;
  }
  .point:before {
    left: -8%;
    top: 30%;
    transition: all 200ms ease-in;
  }
}

<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">User</th>
      <th scope="col" class="text-center">Paid Time Off Balance in Hours </th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of filteredItems$ | async; index as i">
      <th scope="row">1</th>
      <td>
        <ngb-highlight [result]="item.user.firstName + ' ' + item.user.lastName" [term]="filter.value"></ngb-highlight>
      </td>
      <td>
        <ul class="timeline" id="timeline">
          <li class="li complete">
            <div class="timestamp">
              <span>Expire: test</span>
              <span>Hours: test</span>
            </div>
            <div class="point">
              <h5>Awarded Time</h5>
            </div>
          </li>
          <li class="li complete">
            <div class="timestamp">
              <span>Expire: test</span>
              <span>Hours: test</span>
            </div>
            <div class="point">
              <h5>Advance Time</h5>
            </div>
          </li>
          <li class="li complete">
            <div class="timestamp">
              <span>Available Time: test</span>
              <span>&nbsp;</span>
            </div>
            <div class="point">
              <h5>Total</h5>
            </div>
          </li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>

你应该设置你的li（卡）的高度和宽度，否则，卡有不同的宽度/高度，然后它导致的问题。
我强制设置.li的高度/宽度，然后它正常工作。

.li {
  transition: all 200ms ease-in;
  height: 181px;
  width: 137px;
}