JSFiddle - React, Tailwind, and code Playground

HTML

<div class="styleFileInput">        
  <input type="text" class="browseText" /> 
  <input type="button" value="Browse" class="browseButton" /> 

</div>

CSS

body{padding: 40px;}
.styleFileInput{
    position: relative;
}
.browseButton{
    border: 1px solid #b1902c;
    font-size: 0.9em;
    color: #fff;
    padding: 3px 8px;
    border-radius: 4px;
    background: #a7851c;
}
.browseText{
    width: 150px;
    margin: 0 48px 0 0;
    padding: 2px 0;
}
input.theFileInput{
    position:absolute;
    top:0px;
    left: 156px;    
    opacity:0;
    -moz-opacity:0;
    filter:alpha(opacity:0);
    z-index:2;
    width:80px;
    font-size: 1em;
}

JavaScript

$('input[type="text"]').keypress(function(e){
    e.preventDefault();    
});
    
$('.theFileInput').change(function(){
    $('.browseText').val($(this).val());
});

// if condition for Webkit and IE
if($.browser.webkit || $.browser.msie){
    $('.theFileInput').css('left', '190px');
}