bootstrap 4 expanding text fields (flexbox) | demo here: https://jsfiddle.net/dum1rkxq/

index.css

#text-field {
    flex: 1 1 0;
}

#neighbouring-div {
    margin-left: 10px;
}

index.html

<div class="container-fluid">
    <div class="row" style="width: 400px">
        <input id="text-field" type="text" class="form-control">
        <div id="neighbouring-div">
            <button type="button" class="btn btn-primary">
                submit
            </button>
            <button type="button" class="btn btn-danger">
                cancel
            </button>
        </div>
    </div>
</div>

index.js

$('#text-field').focus(function() {
    var filenameInput = $(this);
    var newWidth = $(this).css("width");
    $("#neighbouring-div").fadeOut(100, function() {
        filenameInput.css("flex", "0 1 " + newWidth);
        filenameInput.animate({
            "flex-grow": "1"
        }, 250);
    });
}).blur(function() {
    $(this).animate({
        "flex-grow": '0'
    }, 250, function() {
        $(this).css("flex", "1 1 0");
        $("#neighbouring-div").fadeIn(200);
    });
});