dsamarin/index.html

## index.html
<!doctype html>
<html>
  <head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rethink+Sans:wght@400;600&display=swap" rel="stylesheet">
  </head>
  <body><div>
    <div class="row">
      <div class="status"><div class="status-dot"></div></div>
      <div class="text">
        <div class="header">Picked up</div>
        <div class="description">The package was received at the warehouse.</div>
      </div>
    </div>
    <div class="row">
      <div class="status"><div class="status-dot"></div></div>
      <div class="text">
        <div class="header">Received</div>
        <div class="description">The package was received at the warehouse.</div>
      </div>
    </div>
    <div class="row">
      <div class="status"><div class="status-dot in-progress"></div></div>
      <div class="text">
        <div class="header">In Progress</div>
        <div class="description">The package is 4 stops away from its destination.</div>
      </div>
    </div>
    </div>
  </body>
</html>

## style.css
@keyframes glow {
  from {
    transform: scale(0.8);
  }
}

html, body {
  font-family: 'Rethink Sans', sans-serif;
}

.status-dot, .status:after {
  background-color: #2196f3;
}

.status-dot {
  width: 1em;
  height: 1em;
  border-radius: 100%;
  display: inline-block;
  vertical-align: middle;
}
.in-progress {
  animation: glow 0.5s cubic-bezier(0.3633802276324187, 0, 0.6366197723675813, 1) alternate infinite;
}

.row {
  margin-left: 5em;
  display: flex;
  align-items: stretch;
}

.status {
   display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  position: relative;
}
.status:after {
  content: '';
  flex-grow: 1;
  width: 0.1875em;
  position: absolute;
  height: 100vh;
}
.row:first-child .status:after {
  top: 0.5em;
}
.row:last-child .status:after {
  height: 0.5em;
}

.text {
  margin-left: 0.75em;
  margin-bottom: 1.5em;
}

.header {
  font-weight: 600;
  color: rgba(0, 0, 0, 0.8);
}

.description {
  margin-top: 0.25em;
  color: rgba(0, 0, 0, 0.6);
}
body {
  padding-top: 2em;
  font-size: 10pt;
}
	<!doctype html>
	<html>
	<head>
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Rethink+Sans:wght@400;600&display=swap" rel="stylesheet">
	</head>
	<body><div>
	<div class="row">
	<div class="status"><div class="status-dot"></div></div>
	<div class="text">
	<div class="header">Picked up</div>
	<div class="description">The package was received at the warehouse.</div>
	</div>
	</div>
	<div class="row">
	<div class="status"><div class="status-dot"></div></div>
	<div class="text">
	<div class="header">Received</div>
	<div class="description">The package was received at the warehouse.</div>
	</div>
	</div>
	<div class="row">
	<div class="status"><div class="status-dot in-progress"></div></div>
	<div class="text">
	<div class="header">In Progress</div>
	<div class="description">The package is 4 stops away from its destination.</div>
	</div>
	</div>
	</div>
	</body>
	</html>
	@keyframes glow {
	from {
	transform: scale(0.8);
	}
	}

	html, body {
	font-family: 'Rethink Sans', sans-serif;
	}

	.status-dot, .status:after {
	background-color: #2196f3;
	}

	.status-dot {
	width: 1em;
	height: 1em;
	border-radius: 100%;
	display: inline-block;
	vertical-align: middle;
	}
	.in-progress {
	animation: glow 0.5s cubic-bezier(0.3633802276324187, 0, 0.6366197723675813, 1) alternate infinite;
	}

	.row {
	margin-left: 5em;
	display: flex;
	align-items: stretch;
	}

	.status {
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow: hidden;
	position: relative;
	}
	.status:after {
	content: '';
	flex-grow: 1;
	width: 0.1875em;
	position: absolute;
	height: 100vh;
	}
	.row:first-child .status:after {
	top: 0.5em;
	}
	.row:last-child .status:after {
	height: 0.5em;
	}

	.text {
	margin-left: 0.75em;
	margin-bottom: 1.5em;
	}

	.header {
	font-weight: 600;
	color: rgba(0, 0, 0, 0.8);
	}

	.description {
	margin-top: 0.25em;
	color: rgba(0, 0, 0, 0.6);
	}
	body {
	padding-top: 2em;
	font-size: 10pt;
	}