لا يتم تغير حجم العنصر عند إضافة الصنف active بـ jquery toggleclass

يجب فقط أن تقوم بإزالة المسافة بين .search-icon .active في السطر 18 في CSS ليكون كالتالي:

.search-icon.active {
  width: 300px;
}

لأن الصنف active يتم إضافته للحاوية وليس للأيقونة التي بداخلها.

أما في الكود الخاص بك يتم تطبيق خصائص CSS على العنصر الذي يختوي على الصنف active الموجود داخل العنصر الذي لديه الصنف search-icon