如何设置垂直css步骤栏的样式，如图所示？

Question

我用css（一个垂直下降的基本列表）创建了一个相当简单的垂直步骤组件，想知道如何使用样式使它看起来像下面的图像。

https://codepen.io/friendlyuser/pen/LYPqNxr

*,
*:after,
*:before {
  margin: 0;
  padding: 0;
}

body {
  padding: 15px;
  font-family: Helvetica, sans-serif;
}

input[type="button"] {
  margin-top: 20px;
}

.node {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  display: inline-block;
  transition: all 1000ms ease;
}

.activated {
  box-shadow: 0px 0px 3px 2px rgba(194, 255, 194, 0.8);
}

.divider {
  height: 40px;
  width: 2px;
  margin-left: 4px;
  transition: all 800ms ease;
}

li p {
  display: inline-block;
  margin-left: 25px;
}

li {
  list-style: none;
  line-height: 1px;
}

.blue {
  background-color: rgba(82, 165, 255, 1);
}

.green {
  background-color: rgba(92, 184, 92, 1)
}

.red {
  background-color: rgba(255, 148, 148, 1);
}

.grey {
  background-color: rgba(201, 201, 201, 1);
}

<ul id="progress">
  <li>
    <div class="node green"></div>
    <p>The First Thing!</p>
  </li>
  <li>
    <div class="divider grey"></div>
  </li>
  <li>
    <div class="node grey"></div>
    <p>The Second Thing!</p>
  </li>
  <li>
    <div class="divider grey"></div>
  </li>
  <li>
    <div class="node grey"></div>
    <p>The Third Thing!</p>
  </li>
  <li>
    <div class="divider grey"></div>
  </li>
  <li>
    <div class="node grey"></div>
    <p>The Fourth Thing!</p>
  </li>
  <li>
    <div class="divider grey"></div>
  </li>
  <li>
    <div class="node grey"></div>
    <p>The Last Thing!</p>
  </li>
</ul>