In Html How do I vertically align label acting as button with button so line up correctly

Question

How do I align label element vertically with button.

I am using this hack to make a file button look like the regular bootstrap buttons

Twitter Bootstrap Form File Element Upload Button

The trouble is the button is no longer vertically aligned properly with the the regular buttons. (If I replace the label element with regular button element it looks correct but then of course it does not work.

<div style="padding:0.25em">
    <button type="button" title="Select All" name="select_all" class="btn btn-outline-secondary" onclick="selectAll(&#x27;ARTWORK_TABLE&#x27;);">
        Select All
    </button>
    <button type="button" title="UnSelect All" name="select_all" class="btn btn-outline-secondary" onclick="unselectAll(&#x27;ARTWORK_TABLE&#x27;);">
        UnSelect All
    </button>
    <label class="btn btn-outline-secondary">
        Browse
        <input type="file" id="fileupload" accept="image/*" onchange="uploadImageFile(this.files);" style="display:none">
    </label>
</div>

Answer 1

Using a margin utility class (mt-2) seems to work..

<div class="container">
    <div style="padding:0.25em">
        <button type="button" title="Select All" name="select_all" class="btn btn-outline-secondary" onclick="selectAll('ARTWORK_TABLE');">
            Select All
        </button>
        <button type="button" title="UnSelect All" name="select_all" class="btn btn-outline-secondary" onclick="unselectAll('ARTWORK_TABLE');">
            UnSelect All
        </button>
        <label class="btn btn-outline-secondary mt-2">
            Browse
            <input type="file" id="fileupload" accept="image/*" onchange="uploadImageFile(this.files);" style="display:none">
        </label>
    </div>
</div>

https://www.codeply.com/go/kFHG1BDI1E