JSFiddle - React, Tailwind, and code Playground

HTML

<div class=main>
    <div class=row>
        <div class=left>
            <input type="file">
            <div class=text>UPLOAD FILE</div>
        </div>
        <div class=right>Some text here</div>
    </div>
</div>

CSS

html, body {
    height: 100%;
}
.main {
    display: table;
    width: 100%;
    height: 100%;
}
.row {
    height: 100%;
    display: table-row;
    clear: both;
}
.left {
    background: gray;
    display: table-cell;
    float: none;
    vertical-align: middle;
    width: 58.33333%;
    position: relative;
    min-height: 1px;
}
.right {
    background: blue;
    display: table-cell;
    float: none;
    width: 41.66667%;
    position: relative;
    min-height: 1px;
}
.text {
    text-align: center;
}
input {
    opacity: 0;
    border: 1px solid red;
    height: 100%;
    width: 100%;
    z-index: 99999;
}