Progressive Disclosure

<div class="card">
  <label>Name<input readonly></label>
  <label>Email<input readonly></label>
  <button class="more" id="more">Advanced ▾</button>
  <div class="extra" id="extra">
    <label>Phone<input readonly></label>
    <label>Company<input readonly></label>
  </div>
</div>

.card{width:78%;max-width:320px;padding:18px;border-radius:14px;border:1px solid var(--line);background:var(--surface);display:grid;gap:10px}
label{font:600 11px/1.4 sans-serif;color:var(--muted);display:grid;gap:4px}
input{height:22px;border-radius:6px;border:1px solid var(--line);background:var(--bg)}
.more{justify-self:start;border:0;background:none;color:var(--accent);font-weight:700;font-size:12px;cursor:default;padding:0}
.extra{display:grid;gap:10px;max-height:0;overflow:hidden;opacity:0;transition:max-height .5s ease,opacity .4s ease}
.extra.open{max-height:120px;opacity:1}

const extra = document.getElementById('extra');
const more = document.getElementById('more');
setInterval(() => {
  const open = extra.classList.toggle('open');
  more.textContent = open ? 'Advanced ▴' : 'Advanced ▾';
}, 2200);