JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="input-group" id="unified-inputs">
<input type="text" class="form-control" name="first-name" placeholder="First Name" />
<input type="text" class="form-control" name="last-name" placeholder="Last Name" />
</div>
<input type="text" class="form-control" name="name" style="display: none;" />
<input type="submit" class="btn btn-default" onclick="$().unifyInputs('first-name', 'last-name', 'name');" />

CSS

body { margin: 10px; }

#unified-inputs.input-group { width: 100%; }
#unified-inputs.input-group input { width: 50% !important; }
#unified-inputs.input-group input:last-of-type { border-left: 0; }

JavaScript

$.fn.unifyInputs = function(firstName, secondName, finalName) {
    $("input[name='"+firstName+"']").hide();
    $("input[name='"+secondName+"']").hide();
    
    $("input[name='"+finalName+"']").show();
    $("input[name='"+finalName+"']").val($("input[name='"+firstName+"']").val()+" "+$("input[name='"+secondName+"']").val());
}