<div class="header">      
          <div class="left"><div class="menu">Гамбургер(меню)   </div>                 
          <input id="first" class="search_input">
          </div> 
      <div class="right_part">
           <div>FAQ</div>
           <div>Выйти</div>
      </div>
</div>

body {
  padding: 0 10px;
  height: 100vh;
  margin: 0;
  background: gray;
  overflow: hidden;
}

.header{
  margin-top: 50px;
  background: wheat;
  padding: 0 10px;
  height: 50px;
  display: grid;
  grid-template-columns: 2fr 3fr;  
  overflow: hidden;
}
.left {
  background: #eee;
  padding: 12px 5px;
  display: grid;
  grid-template-columns: 150px 3fr;  
}
.left.active {
   grid-column-start: 1; 
   grid-column-end: 4; 
}
.left.active input {
  width: 100%;
}
.right_part {
  background: #ddd;
  display: grid;
  grid-template-columns: repeat(2, 1.5fr);  
  text-align: center;
}
.right_part div {
  padding: 12px 5px;
}

$(document).on('click', '.left' ,function(){
  $(this).toggleClass('active')
})