<ol class="step-list">
    <li class="step-list__item">
        <dl class="step-card">
            <dt class="step-card__title">ステップ1</dt>
            <dd class="step-card__content">内容</dd>
        </dl>
    </li>
    <li class="step-list__item">
        <dl class="step-card">
            <dt class="step-card__title">ステップ2</dt>
            <dd class="step-card__content">内容</dd>
        </dl>
    </li>
</ol>

ol,li {
    margin: 0;
    padding: 0;  
}

li {
    list-style-type: none;
}

.step-list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 16px;
    margin-top: 60px;
    margin-bottom: 40px;
}

.step-list__item {
  border: 5px solid red;
  border-radius: 20px;
} 

.step-card__title {
  display: grid;
  place-items: center;
  max-width: 98px;
  min-height: 98px;
  margin-top: -66px;
  border-radius: 50%;
  margin-inline: auto;
  font-weight: bold;
  color: #FFF;
  font-size: 18px;
  background: red;
}

.step-card__content {
  margin: 0;
  padding: 20px 10px 5px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.