JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="col-md-12">
    <div class="portlet light bg-inverse tripcontainer">
        <div id="container">
            
        </div>
    </div>
</div>

JavaScript

$( document ).ready(function() {
$.get("http://www.mocky.io/v2/5ba349e82f000054009685b0", function(data, status){
var output = '';
for (i = 0; i < data.length; i++) {
var driverHtml = '<div class="col-md-4 driver"><div><label class="header"><b>Driver Details</b></label></div><div><label>Name:</label><span class="dname">'+data[i].employeename+'</span></div><div><label>Vehicle No:</label><span class="dname">'+data[i].vehicleno+'</span></div><div><label>Mobile:</label><span class="dname">'+data[i].mobilenumber+'</span></div></div>';

var passengerHtml = '<div class="col-md-8 passenger"><div><label class="header"><b>Passenger Details</b></label></div><div><label>Name:</label><span class="pname">'+data[i].passenger_data[0].employeename+'</span></div><div><label>Mobile No:</label><span class="pname">'+data[i].passenger_data[0].mobilenumber+'</span></div><div><label>Email:</label><span class="pname">'+data[i].passenger_data[0].email+'</span></div></div><hr>';
output += driverHtml+passengerHtml;
}
$('#container').html(output);
//console.log(driver_data);
/* $('.dname').html(data[0].employeename);
$('.dvehicle').html(data[0].vehicleno);
$('.dmob').html(data[0].mobilenumber);
$('.demail').html(data[0].email);
$('.dstart').html(data[0].accScrLocation);
console.log(data[0].passenger_data[0]);
$('.pname').html(data[0].passenger_data[0].employeename);
$('.pmob').html(data[0].passenger_data[0].mobilenumber);
$('.pemail').html(data[0].passenger_data[0].email);
$('.pstart').html(data[0].passenger_data[0].starttime);
$('.pslat').html(data[0].passenger_data[0].destlat); */

});

});