<script src="https://kit.fontawesome.com/0337e297bf.js" crossorigin="anonymous"></script>

<div class="search__wrapper">

  <div class="search__icons"><i class="fa-solid fa-magnifying-glass"></i></div>
  <input type="search" class="search__input">

</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

.search__wrapper{
  display: flex;

  .search__icons{
    width: 57px;
    height: 47px;
    background-color: #F9E8FA;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #814684;
    border-radius: 3px;
    cursor: pointer;
    /*border-radius: 3px 0 0 3px;*/
  }

  .search__input{
    height: 47px;
    width: 0;
    outline: none;
    display: none;
    border: none;
    border-radius: 0 3px 3px 0;
    background-color: #F8F8F8;
    font-size: 18px;
    color: #535353;

    &::-webkit-search-decoration,
    &::-webkit-search-cancel-button,
    &::-webkit-search-results-button,
    &::-webkit-search-results-decoration { 
      display: none; 
    }

  }
  .search__input--anim{
    transition: width .3s ease;
  }
}

let searchValid = false;

$('.search__icons').click(function() {
    if(searchValid == false){
      $('.search__icons').css('background', '#F8F8F8');
      $('.search__input').css('display', 'block');
      $('.search__input').css('width', '515px');
      $('.search__icons').css('border-radius', '3px 0 0 3px');
      $('.search__input').addClass('search__input--anim');
      $('.contact__number').css('display', 'none');
      searchValid = true;
    } else {
      $('.search__icons').css('background', '#F9E8FA');
      $('.search__input').css('display', 'none');
      $('.search__input').css('width', '0');
      $('.search__icons').css('border-radius', '3px');
      $('.search__input').addClass('search__input--anim');
      $('.contact__number').css('display', 'block');
      searchValid = false;
    }
    
});