左サイド縦並びチェックリスト式ステップ

<div class="d04-10-04-wrap">
          <ul class="d04-10-04-list">
            <li class="d04-10-04-item d04-10-04-done"><span class="d04-10-04-dot">&#10003;</span>基本情報</li>
            <li class="d04-10-04-item d04-10-04-active"><span class="d04-10-04-dot">2</span>住所入力</li>
            <li class="d04-10-04-item"><span class="d04-10-04-dot">3</span>内容確認</li>
            <li class="d04-10-04-item"><span class="d04-10-04-dot">4</span>完了</li>
          </ul>
          <div class="d04-10-04-panel"><span class="d04-10-04-panel-text">住所を入力してください</span></div>
        </div>

.d04-10-04-wrap{display:flex;gap:14px;width:100%;max-width:300px;font-family:sans-serif}
        .d04-10-04-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;flex:none;width:112px}
        .d04-10-04-item{display:flex;align-items:center;gap:8px;font-size:11.5px;color:#9ca3af;font-weight:600}
        .d04-10-04-dot{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#e5e7eb;color:#fff;font-size:10px;font-weight:700;flex:none}
        .d04-10-04-done{color:#4338ca}
        .d04-10-04-done .d04-10-04-dot{background:#6366f1}
        .d04-10-04-active{color:#1f2937}
        .d04-10-04-active .d04-10-04-dot{background:#fff;border:2px solid #6366f1;color:#6366f1}
        .d04-10-04-panel{flex:1;border-radius:10px;background:#f8f8fc;border:1px dashed #d8d9e6;display:flex;align-items:center;justify-content:center;padding:14px;min-height:100px}
        .d04-10-04-panel-text{font-size:11.5px;color:#8b8fa3;text-align:center}