Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class='wrapper'>
<div class='header'>
  <div class='menu_container'>
  <div class='header_img'></div>
    <div class='main_nav_btn'></div>
      <div class='main_nav'>
             <div class='main_nav_menu'>
          <div class='main_nav_menu_item'><div class='placeholder'>SEARCH</div><form><input onfocus='this.value=""' type='text' name='search' id='search' placeholder='SEARCH1' /></form></div>   
          <div class='main_nav_menu_item'>Subscribe</div>   
          <div class='main_nav_menu_item'>History</div>
          <div class='main_nav_menu_item'>Lookbook</div>
          <div class='main_nav_menu_item'>Shop</div>
          <div class='main_nav_menu_item'>Home</div>
        </div>
      </div>
  </div>
</div>  
</div>  
  
    
      
   

SassMeister-input.scss

// ----
// Sass (v3.3.4)
// Compass (v1.0.0.alpha.18)
// Susy (v)
// ----

@import "susy";


@mixin inputo {
  input { 
             padding: { top:.5rem; }
             font: { family:'Georgia',serif; size:1.5rem; weight:500 }
             color:gray;
             opacity:0; 
             width:0; 
             transition:width ease-in-out .8s;
             height:1.5rem; 
             outline:none;
             appearance:none;
             border:0;
             &::-webkit-input-placeholder {
               padding: { top:1rem };
               color:rgba(105,105,105,.35);
               font: { size:.5rem; }
             }
      }
}

@mixin inputolabel($labelsize:5rem) {
               width:$labelsize;
               border-top-left-radius:3px;
               border-top-right-radius:3px;
               padding:2px;
               color:white;
               background:red;
  
}

.wrapper {
  @include container(12);

.header {
  @include span(last 12 of 12 fluid);
  
 .menu_container {

   @include span(last 12 of 12 fluid);
   position:relative;

   .header_img { 
     @include span(4 of 12 fluid); 
     height:5rem;
     width:15rem;
     position:absolute;
     top:0;
     left:0;
     background:{ 
       image:url(https://www.burdiclothing.com/images/logo2.svg);
       size:cover;
       position:right center;
       repeat:no-repeat;
       }
  }
   .main_nav_btn { @include span(last 2 of 12 fluid); }
   .main_nav_menu { 
     overflow:hidden;
     height:9rem;
     
     @include span(last 4 of 12 fluid);
     
      .main_nav_menu_item {
        margin: {top:3rem; }
        padding: { bottom:-3rem; }
        font: { family:'Helvetica'; }
        cursor:pointer;
        color:red;
        height:3rem;
        text: { align: center; transform:uppercase;}
        
        // sizing controls
        @include span(rtl 1.5 of 12 fluid);
        &:last-child { @include span(last 1.5 of 12 fluid); text: { align:right; } }
        
        // transition for input expansion
        &:nth-child(1), &:nth-child(2){  transition:width ease-in .5s; }    
        
         
         
        // search field button
         &:nth-child(1) { 
           @include inputo;
             
           &.searchthing {
             position:relative;
             
          
             .placeholder {
               width:5rem;
               border-top-left-radius:3px;
               border-top-right-radius:3px;
               padding:2px;
               color:white;
               background:red;
             }
             input { opacity:1; width:85%; float:left; border: { bottom:1px dotted red; } }
            @include span(last 10 of 12 fluid);
            & ~ .main_nav_menu_item:nth-child(n+2){ display:none; }
          } 
         }   
         
        
           
      // subscribe button     
       &:nth-child(2) {
        @include inputo;
         &:after {
           
         }

         &.subscribething {
           position:relative;
           
           .placesubscription { @include inputolabel(7rem); }
          input { opacity:1; width:85%; float:left; border: { bottom:1px dotted red; } }
           @include span(last 10 of 12 fluid);
           & > .main_nav_menu_item { border:1px solid red; }
           & ~ .main_nav_menu_item:nth-child(n){
           opacity:0;
         }
         &.super {
           transition:height linear 1s;
             &:after{
               visibility:visible!important;
               height:3rem!important;
               color:gray;
             } 
            }
          &:after {
            position:absolute;
            top:3.5rem;
            left:0;
            content:'Sign up to receive occasional newsletters from us. We promise to keep your information safe and secure, and never share it with anyone else.';
            text: { align:justify; transform:none!important; }
            font: { size:.75rem; family:'Georgia'; weight:300; }
            line-height:1rem;
            transition-property:height, color;
            transition-duration:1s,.5s;
            transition-delay:1s, 1s;
            transition-timing-function:ease-in,linear;
            visibility:hidden;
            width:85%;
            padding: { top:5px; bottom:5px; }
            color:transparent;
            border-radius:3px;
            
          }
        }
       }
      }
     }
   }
 }
}

SassMeister-output.css

.wrapper {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.wrapper::after {
  content: " ";
  display: block;
  clear: both;
}
.wrapper .header {
  width: 100%;
  float: right;
}
.wrapper .header .menu_container {
  width: 100%;
  float: right;
  position: relative;
}
.wrapper .header .menu_container .header_img {
  width: 32.20339%;
  float: left;
  margin-right: 1.69492%;
  height: 5rem;
  width: 15rem;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(https://www.burdiclothing.com/images/logo2.svg);
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
}
.wrapper .header .menu_container .main_nav_btn {
  width: 15.25424%;
  float: right;
}
.wrapper .header .menu_container .main_nav_menu {
  overflow: hidden;
  height: 9rem;
  width: 32.20339%;
  float: right;
}
.wrapper .header .menu_container .main_nav_menu .main_nav_menu_item {
  margin-top: 3rem;
  padding-bottom: -3rem;
  font-family: 'Helvetica';
  cursor: pointer;
  color: red;
  height: 3rem;
  text-align: center;
  text-transform: uppercase;
  width: 11.01695%;
  float: right;
  margin-left: 1.69492%;
}
.wrapper .header .menu_container .main_nav_menu .main_nav_menu_item:last-child {
  width: 11.01695%;
  float: right;
  text-align: right;
}
.wrapper .header .menu_container .main_nav_menu .main_nav_menu_item:nth-child(1), .wrapper .header .menu_container .main_nav_menu .main_nav_menu_item:nth-child(2) {
  transition: width ease-in .5s;
}
.wrapper .header .menu_container .main_nav_menu .main_nav_menu_item:nth-child(1) input {
  padding-top: .5rem;
  font-family: 'Georgia',serif;
  font-size: 1.5rem;
  font-weight: 500;
  color: gray;
  opacity: 0;
  width: 0;
  transition: width ease-in-out .8s;
  height: 1.5rem;
  outline: none;
  appearance: none;
  border: 0;
}
.wrapper .header .menu_container .main_nav_menu .main_nav_menu_item:nth-child(1) input::-webkit-input-placeholder {
  padding-top: 1rem;
  color: rgba(105, 105, 105, 0.35);
  font-size: .5rem;
}
.wrapper .header .menu_container .main_nav_menu .main_nav_menu_item:nth-child(1).searchthing {
  position: relative;
  width: 83.05085%;
  float: right;
}
.wrapper .header .menu_container .main_nav_menu .main_nav_menu_item:nth-child(1).searchthing .placeholder {
  width: 5rem;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  padding: 2px;
  color: white;
  background: red;
}
.wrapper .header .menu_container .main_nav_menu .main_nav_menu_item:nth-child(1).searchthing input {
  opacity: 1;
  width: 85%;
  float: left;
  border-bottom: 1px dotted red;
}
.wrapper .header .menu_container .main_nav_menu .main_nav_menu_item:nth-child(1).searchthing ~ .main_nav_menu_item:nth-child(n+2) {
  display: none;
}
.wrapper .header .menu_container .main_nav_menu .main_nav_menu_item:nth-child(2) input {
  padding-top: .5rem;
  font-family: 'Georgia',serif;
  font-size: 1.5rem;
  font-weight: 500;
  color: gray;
  opacity: 0;
  width: 0;
  transition: width ease-in-out .8s;
  height: 1.5rem;
  outline: none;
  appearance: none;
  border: 0;
}
.wrapper .header .menu_container .main_nav_menu .main_nav_menu_item:nth-child(2) input::-webkit-input-placeholder {
  padding-top: 1rem;
  color: rgba(105, 105, 105, 0.35);
  font-size: .5rem;
}
.wrapper .header .menu_container .main_nav_menu .main_nav_menu_item:nth-child(2).subscribething {
  position: relative;
  width: 83.05085%;
  float: right;
}
.wrapper .header .menu_container .main_nav_menu .main_nav_menu_item:nth-child(2).subscribething .placesubscription {
  width: 7rem;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  padding: 2px;
  color: white;
  background: red;
}
.wrapper .header .menu_container .main_nav_menu .main_nav_menu_item:nth-child(2).subscribething input {
  opacity: 1;
  width: 85%;
  float: left;
  border-bottom: 1px dotted red;
}
.wrapper .header .menu_container .main_nav_menu .main_nav_menu_item:nth-child(2).subscribething > .main_nav_menu_item {
  border: 1px solid red;
}
.wrapper .header .menu_container .main_nav_menu .main_nav_menu_item:nth-child(2).subscribething ~ .main_nav_menu_item:nth-child(n) {
  opacity: 0;
}
.wrapper .header .menu_container .main_nav_menu .main_nav_menu_item:nth-child(2).subscribething.super {
  transition: height linear 1s;
}
.wrapper .header .menu_container .main_nav_menu .main_nav_menu_item:nth-child(2).subscribething.super:after {
  visibility: visible !important;
  height: 3rem !important;
  color: gray;
}
.wrapper .header .menu_container .main_nav_menu .main_nav_menu_item:nth-child(2).subscribething:after {
  position: absolute;
  top: 3.5rem;
  left: 0;
  content: 'Sign up to receive occasional newsletters from us. We promise to keep your information safe and secure, and never share it with anyone else.';
  text-align: justify;
  text-transform: none !important;
  font-size: .75rem;
  font-family: 'Georgia';
  font-weight: 300;
  line-height: 1rem;
  transition-property: height, color;
  transition-duration: 1s,.5s;
  transition-delay: 1s, 1s;
  transition-timing-function: ease-in,linear;
  visibility: hidden;
  width: 85%;
  padding-top: 5px;
  padding-bottom: 5px;
  color: transparent;
  border-radius: 3px;
}

SassMeister-rendered.html

<div class='wrapper'>
<div class='header'>
  <div class='menu_container'>
  <div class='header_img'></div>
    <div class='main_nav_btn'></div>
      <div class='main_nav'>
             <div class='main_nav_menu'>
          <div class='main_nav_menu_item'><div class='placeholder'>SEARCH</div><form><input onfocus='this.value=""' type='text' name='search' id='search' placeholder='SEARCH1' /></form></div>   
          <div class='main_nav_menu_item'>Subscribe</div>   
          <div class='main_nav_menu_item'>History</div>
          <div class='main_nav_menu_item'>Lookbook</div>
          <div class='main_nav_menu_item'>Shop</div>
          <div class='main_nav_menu_item'>Home</div>
        </div>
      </div>
  </div>
</div>  
</div>