JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<p><label>Check in: </label><input name="din" type="text" id="din"></p>
<p><label>Check out: </label><input name="dout" type="text" id="dout"></p>
<p><label>Time in: </label>
    <select id="tin" name="tin">
        <option value="01:00 pm">13:00</option>
        <option value="07:00 pm">19:00</option>
    </select>
</p>
<p><label>Time out: </label>
    <select id="tout" name="tout">
        <option value="02:00 pm">12:00</option>
        <option value="06:00 pm">18:00</option>
    </select>
</p>

    <p><label>Difference: </label><input name="diff" type="text" id="diff"></p>

CSS

label
{
    float:left;
    width: 75px;
}

JavaScript

$(function() {
    $( "#din, #dout" ).datepicker({minDate: 0, dateFormat: 'dd/mm/yy'});
 });

$(document).ready(function(){
    $("#diff").focus(function(){
        var start = new Date($('#din').val());
        var end = new Date($('#dou').val());
        var diff = new Date(end - start);
	    var days = Math.floor(diff/1000/60/60/24);
        var hours = Math.floor((diff % ( 1000 * 60 * 60 * 24)) / 1000 / 60 / 60);
         $("#diff").val(days+' Day(s) '+hours+' Hour(s)');
    });
});