SOURCE

<div class="sc-AxirZ bJCmFu">
    <a class="sc-AxjAm bcMPWx" href="https://fengniao.ele.me/" target="_blank" rel="noopener noreferrer">
      <dl>
        <dd data-id="1">
          <div>
            <p>全职收入多劳多得
              稳定保障风险少</p>
          </div>
        </dd>
        <dt>
          <span>蜂鸟配送</span></dt>
      </dl>
    </a>
    <a class="sc-AxjAm bcMPWx" href="#">
      <dl>
        <dd data-id="2">
          <div>
            <p>共创合作，领跑市场
              专业扶持为你保驾护航</p>
          </div>
        </dd>
        <dt><span>代理加盟</span></dt>
      </dl>
    </a><a class="sc-AxjAm bcMPWx active" href="#" target="_blank" rel="noopener noreferrer">
      <dl>
        <dd data-id="3">
          <div>
            <p>多一种开店方式
              连接千家万户的餐桌</p>
          </div>
        </dd>
        <dt><span>商家开店</span></dt>
      </dl>
    </a><a class="sc-AxjAm bcMPWx" href="#">
      <dl>
        <dd data-id="4">
          <div>
            <p>准时必达，超时秒赔
              每天领取惊喜红包</p>
          </div>
        </dd>
        <dt><span>外卖点餐</span></dt>
      </dl>
    </a>
  </div>

.bJCmFu {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
}
.bcMPWx {
    display: block;
    opacity: 0.5;
    cursor: pointer;
    text-decoration: none;
    margin: 0px 1em;
    overflow: hidden;
    border-radius: 6px;
    transition: transform 500ms ease 0s, opacity 500ms ease 0s;
    background: rgb(0, 141, 225);
}
.bcMPWx > dl {
    display: flex;
    color: rgb(255, 255, 255);
    height: 300px;
    margin: 0px;
}
.bcMPWx > dl dt {
    box-sizing: border-box;
    width: 100px;
    height: 100%;
    display: flex;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    font-size: 22px;
    letter-spacing: 0.5em;
    font-weight: bold;
    white-space: nowrap;
    margin: 0px;
    padding: 1em;
}

.bcMPWx.active {
    opacity: 1;
}
.bcMPWx.active dd {
    width: 400px;
}