A CodePen by Michael Lajlev.

index.slim

h1 This is why I want flex box so badly
p Makes it possible to have a element take out the remaining space, without having a fixed width on the first element (in this case the button).
br
br


#flexbox
  div
    input type="button" value="Search"  
  div
    input type="search" placeholder="Type your search here" 


#flexbox
  div
    input type="button" value="A very loooooong word for saying search in french"  
  div
    input type="search" placeholder="Type your search here" 

style.scss

@import "compass";
body {
  margin: 40px;
  background: #efefef;
}

#flexbox {
  padding: 10px;
  background: #fff;
  display: -webkit-box;
  -webkit-box-orient: horizontal;

  
  div {
    
    &:first-child {
      margin-right: 10px;
    }
    
    &:last-child {
      -webkit-box-flex: 1;
    }
  }

  input {
    box-sizing: border-box;
    height: 40px;
    padding: 10px;
    
    &[type=search] {
      width: 100%;
    }
  }
  
}