Collapse

<div class="collapse-box">
  <button type="button" class="btn btn-gray collapse-toggle" data-collapse="col-1" aria-expanded="false" aria-controls="col-1">Show details<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button><div id="col-1" class="collapse-panel" hidden><div class="collapse-body"><p class="m-0">Collapsed content stays out of the way until someone asks for it.</p></div></div>
</div>

<div class="collapse-box">
  <button type="button" class="btn btn-tinted collapse-toggle" data-collapse="col-2" aria-expanded="true" aria-controls="col-2">Hide filters<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button><div id="col-2" class="collapse-panel"><div class="collapse-body"><div class="flex items-center flex-wrap gap-2"><span class="badge">Paid</span><span class="badge">Pending</span><span class="badge">Overdue</span></div></div></div>
</div>