写一个搜索框，聚焦时搜索框向左拉长并有动画效果

"```html

Expanding Search Box ```

.search-container {
  position: relative;
  width: 200px;
  overflow: hidden;
}

#searchInput {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  transition: width 0.3s;
}

#searchInput:focus {
  width: 300px;
}

const searchInput = document.getElementById('searchInput');

searchInput.addEventListener('focus', () => {
  searchInput.classList.add('focused');
});

searchInput.addEventListener('blur', () => {
  searchInput.classList.remove('focused');
});

"