Expanding Search Bar

<div class="exp" id="exp"><button class="exp-btn" id="expBtn"><svg viewBox="0 0 24 24" width="20" height="20"><path fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" d="M21 21l-4.3-4.3M11 18a7 7 0 100-14 7 7 0 000 14z"/></svg></button><input class="exp-input" id="expInput" placeholder="Search…"></div>

body{background:#f6f7fa}
.exp{display:flex;align-items:center;background:#1a1f36;border-radius:999px;overflow:hidden;height:56px}
.exp-btn{width:56px;height:56px;border:0;background:none;cursor:pointer;display:grid;place-items:center;flex:none}
.exp-input{width:0;border:0;background:none;outline:none;color:#fff;font:500 16px/1 system-ui,sans-serif;transition:width .4s cubic-bezier(.5,0,.2,1);padding:0}
.exp.open .exp-input{width:200px;padding-right:20px}
.exp-input::placeholder{color:#8a93ad}

var e=document.getElementById('exp');document.getElementById('expBtn').onclick=function(){e.classList.toggle('open');if(e.classList.contains('open'))document.getElementById('expInput').focus()};