JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js"></script>
<script>
var app = angular.module('myAccount', []);

app.controller('CommunicationCtrl', ['$scope', function($scope) {
	$scope.availableTelecomTypes = [{
		technicalName : 'TEL',
		friendlyName : 'Landline phone'
	}, {
		technicalName : 'MOB',
		friendlyName : 'Cell phone'
	}];

	$scope.extraCommunicationItems = [{
		description : "Sometimes",
		label : "work",
		type : "TEL",
		value : "0646635413"
  }, {
    description : "Always",
		label : "aPhone",
		type : "MOB", 
		value : "0623094781"
  }, {
  	description : "",
		label : "Ziltoid",
		type : "MOB", 
		value : "0606660666"
  }, {
  	description : "Mostly on weekends",
		label : "thePhone",
		type : "TEL",
		value : "0123456789"
  }];
}]);

$(document).ready(function() {
  var minWidth = $('.table').css('min-width');
  if ($('.line-box').width() < minWidth.substr(0, minWidth.indexOf('px'))) {
    $('.table-wrapper').addClass('box-shadow-right');
  }

  $('.table-wrapper').on('scroll', function() {
    var tableWidth = $(this).outerWidth();
    var scrolled = $(this).scrollLeft();
    var fullWidth = $('.table').outerWidth();
    var minScroll = 10;

    if (scrolled < minScroll) {
      $(this).removeClass('box-shadow-right');
      $(this).removeClass('box-shadow-both');
      $(this).addClass('box-shadow-right');
    } else if (scrolled >= minScroll && tableWidth + scrolled <= fullWidth - minScroll) {
      $(this).removeClass('box-shadow-right');
      $(this).removeClass('box-shadow-left');
      $(this).addClass('box-shadow-both');
    }...

CSS

.no-padding {
    padding-left: 0;
    padding-right: 0;
}

.btn-sm {
	width: 37px;
	height: 37px;
}

.table-wrapper {
	margin-bottom: 10px;
	overflow-x: auto;
}

.table-wrapper .table {
	table-layout: fixed;
	min-width: 500px;
	padding-right: 12px;
	margin-bottom: 15px;
}

.table-wrapper .table > div {
	margin-right: 0px;
	margin-left: 0px;
}

.table-wrapper table>tbody+tbody {
	border-top: 0px;
}

.box-shadow-left {
	box-shadow: 10px 0px 10px -10px #cccccc inset;
}

.box-shadow-right {
	box-shadow: -10px 0px 10px -10px #cccccc inset;
}

.box-shadow-both {
	box-shadow: 10px 0px 10px -10px #cccccc inset, -10px 0px 10px -10px #cccccc inset;
}