<div class="wrapper">
  <ol class="c-stepper">
    <li class="c-stepper__item">

      <div class="c-stepper__content">
        <h3 class="c-stepper__title">Step 1</h3>
        <p class="c-stepper__desc" style="line-height: 1.4;">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ducimus, doloremque ut, eius cum in repellat temporibus rem quod officia eligendi dolores necessitatibus at aperiam accusantium provident consequuntur eaque quaerat fuga.</p>
      </div>
    </li>
    <li class="c-stepper__item">

      <div class="c-stepper__content">
        <h3 class="c-stepper__title">Step 2</h3>
        <p class="c-stepper__desc">Some desc text</p>
        <p class="c-stepper__desc">Some desc text</p>
      </div>
    </li>
    <li class="c-stepper__item">

      <div class="c-stepper__content">
        <h3 class="c-stepper__title">Step 3</h3>
        <p class="c-stepper__desc">Some desc text</p>
        <p class="c-stepper__desc">Some desc text</p>
      </div>
    </li>
  </ol>
</div>
:root {
  --circle-size: clamp(1.5rem, 5vw, 3rem);
  --spacing: clamp(0.25rem, 2vw, 0.5rem);
}

.c-stepper__item {
  position: relative;
  display: flex;
  gap: 1rem;
  padding-bottom: 4rem;

  &:before {
    content: "";
    flex: 0 0 var(--circle-size);
    height: var(--circle-size);
    border-radius: 50%;
    background-color: lightgrey;
  }

  &:not(:last-child) {
    &:after {
      content: "";
      position: absolute;
      left: 0;
      top: calc(var(--circle-size) + var(--spacing));
      bottom: var(--spacing);
      z-index: -1;
      transform: translateX(calc(var(--circle-size) / 2));
      width: 2px;
      background-color: #e0e0e0;
    }
  }
}

.c-stepper__title {
  font-weight: bold;
  font-size: clamp(1rem, 4vw, 1.25rem);
  margin-bottom: clamp(0.85rem, 2vmax, 1rem);
}

.c-stepper__desc {
  color: grey;
  font-size: clamp(0.85rem, 2vmax, 1rem);
}

.c-stepper__content {
  max-width: 700px;
}

/*** Non-demo CSS ***/

.wrapper {
  max-width: 1000px;
  margin: 2rem auto 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  padding: 1rem;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.