JSFiddle - React, Tailwind, and code Playground

HTML

<form method="POST" action="http://test.com" accept-charset="UTF-8" class="mainInformationContrainer" file="1">
    <ul>
    <li>
        <label>Picture</label>
        <div class="oneInfo thumbnail">
            <img src="#" id="imageID"/>
        </div>
    </li>
    <li>
        <label>.</label>
        <div class="oneInfo" style="width: 200px; overflow: hidden">
            <span class="spanForFileInput">

                <input type="button" class="selectImage" value="Select Image"/>
                    <input type="file" value="Select Image" id="imgInp"/>
            </span>
            <input type="submit"/>
        </div>
    </li>
    <li>
        <label></label>
        <div class="oneInfo">

        </div>
    </li>
</ul>
</form>

CSS

.mainInformationContrainer{
    position: relative;
    width: 100%;
}
.mainInformationContrainer ul li{
    list-style: none;
    width: 100%;
    margin-bottom: 10px;
    overflow: auto;
}
.mainInformationContrainer ul li label{
    width: 15%;
    display: block;
    float: left;
    color: #444;
    font: 13px/1.7em "Open Sans", "trebuchet ms", arial, sans-serif;
}
.mainInformationContrainer ul li .oneInfo{
    width: 100%;
}

.mainInformationContrainer ul li .oneInfo span{
    width: 40%;
    color: #e5412d;
}
.mainInformationContrainer ul li  input[type="submit"], .mainInformationContrainer ul li  input[type="file"]{
    color: #ffffff;
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    background-color: #e5412d;
    border-color: #dd301b;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius:4px;
    line-height: 1.428571429;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
}
.mainInformationContrainer ul li  input[type="submit"]:hover{
    background-color: red;
}


.mainInformationContrainer ul li .oneInfo img{
    width: 200px;
    height: 200px;
}
.mainInformationContrainer ul li .oneInfo .spanForFileInput{
    overflow: hidden;
    position: relative;
    vertical-align: middle;
    color: #333;
    background-color: #fff;
    border-color: #ccc;
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.428571429;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

#imgInp{
    position: absolute;
    top: 0;
    right: 0;
   ...

JavaScript

$(document).ready(function(){
    $("#imgInp").change(function(){
        readURL(this);
    });
});

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#imageID').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}