thewarpaint/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
body {
  background-color: grey;
}

.asset {
  background-color: white;
  padding: 10px;
}

.row {
  padding-left: 6px;
}

.row div {
  display: inline-block;
}

.content, .row div {
  vertical-align: top;
}

.thumbnail, .content {
  display: inline-block;
}

.thumbnail {
  background-image: url('http://dev.corp.ooyala.com:7111/iq/public/ooyala_now/images/noThumbnail.png');
  width: 4.5rem;
  height: 48px;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.content {
  width: calc(100% - 5rem);
  vertical-align: top;
}

.asset-name, .user-count {
  width: calc(100% - 4.5rem);
}

.asset-type, .user-percentage {
  width: 4rem;
  text-align: right;
}

.asset-name {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
</style>
</head>
<body>
  <div class="asset">
    <div class="thumbnail"></div>
    <div class="content">
      <div class="row">
        <div class="asset-name">I was left standing in the wilderness downdown </div>
        <div class="asset-type">VOD</div>
      </div>
      <div class="row">
        <div class="user-count">1k users</div>
        <div class="user-percentage">23.4%</div>
      </div>
    </div>
  </div>


<script id="jsbin-source-css" type="text/css">body {
  background-color: grey;
}

.asset {
  background-color: white;
  padding: 10px;
}

.row {
  padding-left: 6px;
}

.row div {
  display: inline-block;
}

.content, .row div {
  vertical-align: top;
}

.thumbnail, .content {
  display: inline-block;
}

.thumbnail {
  background-image: url('http://dev.corp.ooyala.com:7111/iq/public/ooyala_now/images/noThumbnail.png');
  width: 4.5rem;
  height: 48px;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.content {
  width: calc(100% - 5rem);
  vertical-align: top;
}

.asset-name, .user-count {
  width: calc(100% - 4.5rem);
}

.asset-type, .user-percentage {
  width: 4rem;
  text-align: right;
}

.asset-name {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}</script>
</body>
</html>

## jsbin.cadepupume.css
body {
  background-color: grey;
}

.asset {
  background-color: white;
  padding: 10px;
}

.row {
  padding-left: 6px;
}

.row div {
  display: inline-block;
}

.content, .row div {
  vertical-align: top;
}

.thumbnail, .content {
  display: inline-block;
}

.thumbnail {
  background-image: url('http://dev.corp.ooyala.com:7111/iq/public/ooyala_now/images/noThumbnail.png');
  width: 4.5rem;
  height: 48px;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.content {
  width: calc(100% - 5rem);
  vertical-align: top;
}

.asset-name, .user-count {
  width: calc(100% - 4.5rem);
}

.asset-type, .user-percentage {
  width: 4rem;
  text-align: right;
}

.asset-name {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<style id="jsbin-css">
	body {
	background-color: grey;
	}

	.asset {
	background-color: white;
	padding: 10px;
	}

	.row {
	padding-left: 6px;
	}

	.row div {
	display: inline-block;
	}

	.content, .row div {
	vertical-align: top;
	}

	.thumbnail, .content {
	display: inline-block;
	}

	.thumbnail {
	background-image: url('http://dev.corp.ooyala.com:7111/iq/public/ooyala_now/images/noThumbnail.png');
	width: 4.5rem;
	height: 48px;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	}

	.content {
	width: calc(100% - 5rem);
	vertical-align: top;
	}

	.asset-name, .user-count {
	width: calc(100% - 4.5rem);
	}

	.asset-type, .user-percentage {
	width: 4rem;
	text-align: right;
	}

	.asset-name {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	}
	</style>
	</head>
	<body>
	<div class="asset">
	<div class="thumbnail"></div>
	<div class="content">
	<div class="row">
	<div class="asset-name">I was left standing in the wilderness downdown </div>
	<div class="asset-type">VOD</div>
	</div>
	<div class="row">
	<div class="user-count">1k users</div>
	<div class="user-percentage">23.4%</div>
	</div>
	</div>
	</div>


	<script id="jsbin-source-css" type="text/css">body {
	background-color: grey;
	}

	.asset {
	background-color: white;
	padding: 10px;
	}

	.row {
	padding-left: 6px;
	}

	.row div {
	display: inline-block;
	}

	.content, .row div {
	vertical-align: top;
	}

	.thumbnail, .content {
	display: inline-block;
	}

	.thumbnail {
	background-image: url('http://dev.corp.ooyala.com:7111/iq/public/ooyala_now/images/noThumbnail.png');
	width: 4.5rem;
	height: 48px;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	}

	.content {
	width: calc(100% - 5rem);
	vertical-align: top;
	}

	.asset-name, .user-count {
	width: calc(100% - 4.5rem);
	}

	.asset-type, .user-percentage {
	width: 4rem;
	text-align: right;
	}

	.asset-name {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	}</script>
	</body>
	</html>