A Pen by Anonasaurus Rex.

index.html

<div class="nav">
  <div class="controls is-active">
    <button class="left">Left</button>
    <select name='options'>
      <option value='option-1'>Option 1</option>
    </select>
  </div>
  <div class="controls">
    <button class="right">right</button>
    <select name='options'>
      <option value='option-1'>Option 2</option>
    </select>
  </div>
</div>

mkHgE.markdown

mkHgE

Forked from David Tintner's Pen Fhciy.

A Pen by Captain Anonymous on CodePen.

License.

script.js

$('button').click(function(){
  $(this).parent('.controls').toggleClass('is-active');
  $(this).parent('.controls').siblings('.controls').toggleClass('is-active');
});

style.scss

.nav {
  position: relative;
  width: 100%;
  padding: 10px 0;
  border: solid 1px black;
  &:after {
    content: '';
    display: table;
    line-height: 0;
    clear: both;
  }
}
button {
  width: 200px;
  padding: 5px 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  box-sizing: border-box;
}
select {
  opacity: 0;
  visibility: hidden;
  max-width: 0;
  transition: none;
  position: absolute;
  transition: all 0 ease 700ms;
}
.controls {
  float: left;
  width: 200px;
  background: #ccc;
  transition: all 1000ms;
}
.is-active {
  width: calc(100% - 210px);
  background: #fff;
  select {
    opacity: 1;
    visibility: visible;
    max-width: 500px;
    transition: none;
  }
}