Назначить через jquery элементу display:flex

//block search 
    $('.openSearch').click(function () { 
        $('.social__hidd').stop().css({ 
            opacity: 0.0, 
            display:'none' 
        }); 
        $('.search').stop().fadeIn(0).css({ 
            display:'flex' 
        }).css({ 
            // display: '-webkit-flex' 
        }); 
    }); 
 
    $('.closeSearch').click(function () { 
        $('.social__hidd').stop().css({ 
            opacity: 1, 
            display:'block' 
        }); 
        $('.search').fadeOut(0); 
 
    });

.search{ 
  color: @search; 
  position: absolute; 
  right: 0; 
  top: 20%; 
  display: -webkit-box; 
  display: -webkit-flex; 
  display: -ms-flexbox; 
  display: none; 
  -webkit-box-orient: horizontal; 
  -webkit-box-direction: normal; 
  -webkit-flex-direction: row; 
  -ms-flex-direction: row; 
  flex-direction: row; 
  -webkit-box-align: center; 
  -webkit-align-items: center; 
  -ms-flex-align: center; 
  align-items: center; 
  -webkit-box-pack: center; 
  -webkit-justify-content: center; 
  -ms-flex-pack: center; 
  justify-content: center; 
  z-index: 25; 
   
  i{ 
    color: #fff; 
  } 
 
 
 
  &__cont{ 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-orient: horizontal; 
    -webkit-box-direction: normal; 
    -webkit-flex-direction: row; 
    -ms-flex-direction: row; 
    flex-direction: row; 
    -webkit-box-align: center; 
    -webkit-align-items: center; 
    -ms-flex-align: center; 
    align-items: center; 
    border-bottom: 1px solid @search; 
    margin-right: 13px; 
  } 
   
  &__input{ 
    width: 207px; 
    background-color: transparent; 
    border:none; 
    height: 30px; 
    outline: none; 
 
  }

<div class="social"> 
                <div class="social__hidd"> 
                    <a href=""><i class="fa fa-facebook" aria-hidden="true"></i></a> 
                    <a href=""><i class="fa fa-twitter" aria-hidden="true"></i></a> 
                    <a href=""><i class="fa fa-instagram" aria-hidden="true"></i></a> 
                    <i class="fa fa-search openSearch" aria-hidden="true"></i> 
                </div> 
 
            </div> 
            <div class="search"> 
                <div class="search__cont"> 
                    <input class="search__input main-textLato" type="text" placeholder="Search..."> 
                    <a href=""><i class="fa fa-search" aria-hidden="true"></i></a> 
                </div> 
                <i class="fa fa-times closeSearch" aria-hidden="true"></i> 
            </div>