Sizable input file and submit button on same line

Question

I want to display a label, an input file and a submit button on the same line. The input file needs to be sizable (this means it will change size when the parent changes size and NOT dragable to resize). I tried to use display: table and display: table-cell and for some reason it works for other combinations but not this one

    <div style="display:table;">
        <label style="display: table-cell; width: 80px;">Text</label>
        <input type="file" style="display:table-cell; width: 100%;"/>
        <input style="display: table-cell; width:50px;" type="submit" value = "Upload"/>
    </div>

Here is the fiddle: https://jsfiddle.net/danbenedek/wxn976oe/2/

Here is the original fiddle: http://jsfiddle.net/danbenedek/un9qae0x/1/ from where I got inspired but all the elements are div and it works. The moment I changed them to label and input it stop working.

Answer 1

Is this what you want?

https://jsfiddle.net/wxn976oe/4/

.Column {
  background-color: red;
  float: left;
}
label.Column {
    width: 80px;
}
input[type="submit"] {
    width: 50px;
}
input[type="file"] {
    width: calc(100% - (80px + 50px));
}

<div class="Row">
    <label class="Column">Text</label>
    <input class="Column" type="file"/>
    <input class="Column" type="submit" value = "Upload"/>
</div>