Edit in JSFiddle

.layout-media--flex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;

    & > * {
        margin-left: $horizontal-unit;
    }

    *:first-child {
        margin-left: 0;
    }

    .layout-media--flex__large {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;

        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        -ms-flex: 1;
        flex: 1;

        justify-content: space-between;
    }

    .layout-media--flex__small {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
    }
}

.layout-media--flex__object{    
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

<div class="layout-media--flex">
      <input type="search" class="layout-media--flex__large layout-media--flex__object"/>
    <button class="layout-media--flex__small">Variable Length</button>
</div>