JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/css/materialize.min.css">
<div class="container">
<div class="row equal">
<div class="col s12 m6">
<div class="card">
<div class="card-content"><span class="badge"><i class="material-icons dp48">search</i></span>
<span class="card-title">My Left List
<span class="new badge red" data-badge-caption="">4</span>
</span>
<div class="table-responsive">
<table class="table striped table-hover table-curved" ng-controller="Hello">
<tbody>
<tr>
<td><b>12345</b></td>
<td>Random Text @</td>
<td><b>300121</b></td>
</tr>
<tr>
<td><b>123</b></td>
<td>Random Text @</td>
<td><b>300121</b></td>
</tr>
<tr>
<td><b>123</b></td>
<td>Random Text @</td>
<td><b>300121</b></td>
</tr>
<tr>
<td><b>123</b></td>
<td>Random Text @</td>
<td><b>300121</b></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col s12 m6">
<div class="card">
<div class="card-content">
<span class="card-title">My Right List
<span class="new badge red" data-badge-caption="">4</span>
</span>
<div class="table-responsive">
<table class="table striped table-hover table-curved" ng-controller="Hello">
<tbody>
<tr>
<td><b>12345</b></td>
<td>Random Text @</td>
<td><b>300121</b></td>
</tr>
<tr>
<td><b>12345678</b></td>
...
CSS
@import 'https://fonts.googleapis.com/icon?family=Material+Icons';
body {
background-color: #c8c8c8;
}
.equal {
display: flex;
flex-wrap: wrap;
}
.container {
width: 99% !important;
}
.container .row {
margin-left: -.2rem !important;
margin-right: -.2rem !important;
}
.row .col {
padding: 0 .2rem !important;
}
.container .row .col .card {
margin: .5rem 0 -.15rem 0 !important;
}
table.striped > tbody > tr > td:first-child {
border-radius: 10px 0 0 10px;
}
table.striped > tbody > tr > td:last-child {
border-radius: 0 10px 10px 0;
}