.scd-accc {
display: flex; flex-direction: column; gap: 4px;
width: 240px; margin: 0 auto;
}
.scd-accc > input { display: none; }
.scd-accc__c {
background: var(--c);
color: var(--t);
border-radius: 0;
border-left: 4px solid #0a0a14;
border-right: 4px solid #0a0a14;
padding: 10px 14px;
cursor: pointer;
display: flex; flex-direction: column; gap: 4px;
height: 26px; overflow: hidden;
transition: height .35s cubic-bezier(.3,1.3,.5,1);
font-family: ui-monospace, monospace;
}
.scd-accc__c b { font: 800 11px/1 ui-monospace, monospace; letter-spacing: 0.18em; }
.scd-accc__c span { font: 11px/1.4 ui-monospace, monospace; opacity: 0.85; }
#scd-accc-1:checked ~ .scd-accc__c:nth-of-type(1),
#scd-accc-2:checked ~ .scd-accc__c:nth-of-type(2),
#scd-accc-3:checked ~ .scd-accc__c:nth-of-type(3) {
height: 78px;
} <div class="scd-accc">
<input type="radio" name="scd-accc" id="scd-accc-1" checked>
<input type="radio" name="scd-accc" id="scd-accc-2">
<input type="radio" name="scd-accc" id="scd-accc-3">
<label for="scd-accc-1" class="scd-accc__c" style="--c:#ff3d83; --t:#fff"><b>SIDE A · 90 MIN</b><span>1. Saturday Night · 4:21</span><span>2. Late Bloomer · 3:18</span></label>
<label for="scd-accc-2" class="scd-accc__c" style="--c:#00d4d4; --t:#0a0a14"><b>SIDE B · 60 MIN</b><span>1. Cobalt Hour · 5:04</span><span>2. Chrome Eyes · 4:11</span></label>
<label for="scd-accc-3" class="scd-accc__c" style="--c:#fef34c; --t:#0a0a14"><b>BONUS · 30 MIN</b><span>1. Mixtape Outro · 2:48</span><span>2. Studio Banter · 1:16</span></label>
</div>
Live preview Edit any tab — preview updates live Ready