タブ切替スプリット比率レイアウト

<div class="d01-13-06-wrap">
          <div class="d01-13-06-tabs">
            <button type="button" class="d01-13-06-tab is-active" data-ratio="70">A重視</button>
            <button type="button" class="d01-13-06-tab" data-ratio="50">均等</button>
            <button type="button" class="d01-13-06-tab" data-ratio="30">B重視</button>
          </div>
          <div class="d01-13-06-split">
            <div class="d01-13-06-pane d01-13-06-pa"><span>A</span></div>
            <div class="d01-13-06-pane d01-13-06-pb"><span>B</span></div>
          </div>
        </div>

.prev.d01-13-06{padding:0}
        .d01-13-06-wrap{width:100%;height:230px;display:flex;flex-direction:column}
        .d01-13-06-tabs{display:flex;gap:6px;padding:10px;background:#f1f5f9}
        .d01-13-06-tab{flex:1;border:0;border-radius:8px;padding:7px 0;font-size:11.5px;font-weight:700;background:#fff;color:#475569;cursor:pointer;transition:background .2s ease,color .2s ease}
        .d01-13-06-tab.is-active{background:#111827;color:#fff}
        .d01-13-06-split{flex:1;display:flex}
        .d01-13-06-pane{display:flex;align-items:center;justify-content:center;transition:flex-grow .5s cubic-bezier(.2,.7,.3,1);flex-grow:1;flex-basis:0}
        .d01-13-06-pane span{color:#fff;font-weight:800;font-size:16px}
        .d01-13-06-pa{background:linear-gradient(150deg,#f43f5e,#be123c)}
        .d01-13-06-pb{background:linear-gradient(150deg,#0ea5e9,#0369a1)}

(function(){
        var root=document.getElementById('item-01-13-06');if(!root)return;
        var tabs=root.querySelectorAll('.d01-13-06-tab');
        var pa=root.querySelector('.d01-13-06-pa'),pb=root.querySelector('.d01-13-06-pb');
        function apply(ratio){
          pa.style.flexGrow=ratio;
          pb.style.flexGrow=100-ratio;
        }
        apply(70);
        tabs.forEach(function(tab){
          tab.addEventListener('click',function(){
            tabs.forEach(function(x){x.classList.remove('is-active');});
            tab.classList.add('is-active');
            apply(parseInt(tab.getAttribute('data-ratio'),10));
          });
        });
      })();