<div class="main">
        <div id="first">Первый</div>
        <div id="second">Второй</div>
</div>

body {
  background: #ffcca7;
}
.main {
  width: 500px;
  height: 40px;
  background: #ddd;
  margin: 20px auto;
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
}
.main div {
  flex: 50%;
  text-align: center;
  padding: 10px;
}
.main #first {
  background: #eee;
}
.main .flexActive {
  flex: 0 0 100%;
}

$(document).on('click', '#first' ,function(){
  $(this).toggleClass('flexActive')
})