JSFiddle - React, Tailwind, and code Playground

HTML

<div class="inputs">
            <div class="upload2">
                <img src="" width="18" height="19" />
            </div>        
                <div class="upload1">
                <input type="file" name="photo[]" size="55" style=" padding: 0px 4px; width: 430px; background-color: #f0f0f0;" />
                <input type="button" name="add" value="+"  id="add_n" style="width:20px"/>
                <input type="button" name="add" value="-"  id="remove" style="width:20px"/>
            </div>
            <div class="clear" style="height:0"></div>
            <div class="field"><div class="upload3" ><img src="" width="18" height="19" /></div><div class="upload1"><input type="file" name="photo[]" size="55" style=" padding: 0px 4px; width: 430px; background-color: #f0f0f0;" value="' + i + '" /></div></div><div style="clear:both" style="height:0"></div>
<div class="field"><div class="upload3" ><img src="" width="18" height="19" /></div><div class="upload1"><input type="file" name="photo[]" size="55" style=" padding: 0px 4px; width: 430px; background-color: #f0f0f0;" value="' + i + '" /></div></div><div style="clear:both" style="height:0"></div>

                        <!-- новые поля загрузки появляются здесь -->
        </div>

CSS

.inputs2 {
    padding:6px 10px 0 10px;
}
.upload1 {
    display:inline-block; 
    padding-right: 7px;

}
.upload2 {
    display:inline-block; 
    padding-right: 4px; 
    position:relative;
    top:3px
}
.upload3 {
    display:inline-block; 
    padding-right: 7px;
    position:relative;
    top:3px
}
*html .upload3 {float:left;top:0}
* +html .upload3 {float:left;top:0}
*html .upload1 {float:left;}
* +html .upload1 {float:left;}
*html .upload2 {float:left;margin-right:3px;}
* +html .upload2 {float:left;margin-right:3px}
.clear {clear:both}