Как выравнить вертикально все элементы списка, чтобы они не шли в разнобой?

Question

[Константин]

Макет, на котором есть пример, как должно быть https://www.figma.com/file/znbr0aItfCCgzW8PP4ISR0/...

<div class="container__second-lpx">
        <div class="list"></div>
        <h1 class="title__table">Why abode? Compare and find out.</h1>
        <div class="table">
        <ul class="table__cell">
          <li class="cell"></li>
          <li class="cell">App Access & Mobile<br> Notifications</li>
          <li class="cell">Home Automation<br> Platform</li>
          <li class="cell">24/7 Pro Monitoring</li>
          <li class="cell">Minimum Fee For Cameras<br> On System</li>
          <li class="cell">Smart Home<br> Integrations</li>
        </ul>
        <ul class="table__cell">
          <li class="cell bold">Seqty</li>
          <li class="cell bold">Included Free</li>
          <li class="cell dot__grey"><img src="./images/dot__grey.png" alt=" "></li>
          <li class="cell bold">$8.33/mo*</li>
          <li class="cell bold">FREE</li>
          <li class="cell bold">
            HUE, Sonos, Bose, IFTTT,<br> Apple HomeKit, 100+ others
          </li>
          <button>  </button>
        </ul>
        <ul class="table__cell">
          <li class="cell bold">SIMPLISAFE</li>
          <li class="cell bold">$25/mo</li>
          <li class="cell cross__red"><img src="./images/cross.png" alt=" "></li>
          <li class="cell bold">Starts at $15/mo</li>
          <li class="cell bold">$19.99/mo</li>
          <li class="cell">Nest (Thermostat only), August</li>
        </ul>
        <ul class="table__cell">
          <li class="cell bold">ADT BLUE</li>
          <li class="cell bold">Included Free</li>
          <li class="cell dot__blue"><img src="./images/dot__blue.png" alt=" "></li>
          <li class="cell bold">$19.99/mo</li>
          <li class="cell bold">FREE</li>
          <li class="cell">
            HUE, Nest, Sonos, iRobot, IFTTT, Lutron, etc.
          </li>
        </ul>
      </div>
    </div>
  </div>

.container__second-lpx {
  max-width: 1440px;
  margin: 0 auto;
}

.table {
  display: flex;
  flex-wrap: wrap;
  margin-top: 80px;
}

.title__table {
  padding-top: 139px;
  padding-bottom: 80px;
  font-size: 48px;
  line-height: 130%;
  text-align: center;
  color: #190a33;
  max-width: 690px;
  margin: 0 auto;
}

.table__cell {
  list-style: none;
}

.bold__indent {
  font-weight: 600;
  font-size: 20px;
  line-height: 180%;
  text-align: center;
  color: #ffffff;
  opacity: 0.8;
}

.table__cell .cell {
  border-bottom: 1px solid #666a80;
}

.table__cell:nth-child(3) {
  text-align: center;
}

.table__cell:nth-child(4) {
  text-align: center;
}

.table__cell:nth-child(2) {
  background: #0c0f35;
  opacity: 0.8;
  border-radius: 20px;
  color: #ffffff;
  text-align: center;
}

.table__cell:nth-child(1) .cell {
  font-size: 20px;
  line-height: 180%;
  color: #605c66;
  opacity: 0.8;
  padding-top: 25px;
  padding-bottom: 25px;
  padding-right: 65px;
}

.table__cell:nth-child(2) .cell {
  padding-top: 50px;
  padding-bottom: 30px;
  padding-left: 65px;
  padding-right: 65px;
}

.table__cell:nth-child(3) .cell {
  padding-top: 50px;
  padding-bottom: 25px;
  padding-left: 65px;
  padding-right: 65px;
}

.table__cell:nth-child(4) .cell {
  padding-top: 50px;
  padding-bottom: 25px;
  padding-left: 65px;
  padding-right: 65px;
}

.table__cell button {
  margin-bottom: 54px;
  margin-top: 25px;
  width: 192px;
  height: 60px;
  background: #ffffff;
  border-radius: 33px;
}

.Seqty {
  padding-top: 45px;
  font-weight: bold;
  font-size: 24px;
  line-height: 130%;
  color: #f4f6f8;
  opacity: 0.8;
}

.bold {
  font-weight: 600;
  font-size: 20px;
  line-height: 180%;
  opacity: 0.8;
}

Comments

[Froggyweb]

отличный сервис для этого codepen.io
здесь можно разместить скриншоты как хотелось бы, как получается - не надо.

[Константин]

Froggyweb, Вот макет и там есть этот фрагмент https://www.figma.com/file/znbr0aItfCCgzW8PP4ISR0/...

[Froggyweb]

Redwhaler,
1. Таблица
2 Гриды
3 Фиксированная высота (так себе)