左右交互配置タイムライン(静止)

<ul class="d06-08-02-line">
          <li class="d06-08-02-l"><div class="d06-08-02-card"><span class="d06-08-02-date">2018</span><h4>制作会社に入社</h4><p>Web制作の基礎を習得</p></div><span class="d06-08-02-dot"></span></li>
          <li class="d06-08-02-r"><span class="d06-08-02-dot"></span><div class="d06-08-02-card"><span class="d06-08-02-date">2020</span><h4>独立・フリーランス</h4><p>個人事業として案件を受注</p></div></li>
          <li class="d06-08-02-l"><div class="d06-08-02-card"><span class="d06-08-02-date">2023</span><h4>法人化</h4><p>合同会社を設立し組織化</p></div><span class="d06-08-02-dot"></span></li>
        </ul>

.d06-08-02{padding:20px 16px;}
        .d06-08-02-line{list-style:none;margin:0;padding:0;position:relative;width:100%;max-width:280px;}
        .d06-08-02-line::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;background:#dfe3ea;transform:translateX(-50%);}
        .d06-08-02-line li{position:relative;display:flex;align-items:center;min-height:56px;margin-bottom:6px;}
        .d06-08-02-l{justify-content:flex-end;text-align:right;padding-right:16px;}
        .d06-08-02-r{justify-content:flex-start;text-align:left;padding-left:16px;}
        .d06-08-02-dot{position:absolute;left:50%;top:50%;width:9px;height:9px;border-radius:50%;background:#e0733f;transform:translate(-50%,-50%);border:2px solid #fff;box-shadow:0 0 0 1px #e0733f;}
        .d06-08-02-card{width:120px;}
        .d06-08-02-date{display:block;font-size:11px;color:#e0733f;font-weight:700;}
        .d06-08-02-card h4{margin:2px 0;font-size:12.5px;color:#222;}
        .d06-08-02-card p{margin:0;font-size:10.5px;color:#888;line-height:1.4;}