Expanding search bar

<div class="search">
    <!-- The input element -->
    <input type="text" class="search__input" placeholder="Search" />

    <!-- The search button -->
    <button class="search__button">
        <svg class="search__icon">...</svg>
    </button>
</div>

.search {
    align-items: center;
    display: flex;
    justify-content: center;
}

.search__button {
    align-items: center;
    display: flex;
    justify-content: center;
}

.search__input {
    width: 0;
}

.search__input {
    transition: width 120ms;
}

.search--expanded .search__input {
    width: 10rem;
}

searchButton.addEventListener('click', () => {
    searchBar.classList.toggle('search--expanded');
});

searchButton.addEventListener('click', () => {
    const isExpanded = searchBar.classList.contains('search--expanded');
    if (!isExpanded) {
        inputEle.focus();
    }

    ...
});