fupslot/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Title with action buttons</title>
<style id="jsbin-css">
.bar {
  position: relative;
}

.bar-inner {
  padding: 5px;
  color: #aaa;
}

.bar .title {
  padding-right: 40px;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

.bar .action-buttons {
  position: absolute;
  top: 0;
  right: 0;
  padding: inherit;
}

.bar .action-buttons ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.bar .action-buttons ul li {
  display:inline-block;
}

.bar .action-buttons ul li a {
  text-decoration: none;
  color: inherit;
  font-size:0.9em;
  transition: color .3s;
}

.bar .action-buttons ul li a:hover {
  color: red;
}

.bar.one .title {
  padding-right: 20px;
}
</style>
</head>
<body>

  <div class="bar one">
    <div class="bar-inner one">
      <div class="title"> <strong>[ICON]</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus</div>
      <div class="action-buttons">
        <ul><li><a href="#">X</a></li></ul>
      </div>
    </div>
  </div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Title with action buttons</title>
	<style id="jsbin-css">
	.bar {
	position: relative;
	}

	.bar-inner {
	padding: 5px;
	color: #aaa;
	}

	.bar .title {
	padding-right: 40px;
	white-space: nowrap;
	overflow:hidden;
	text-overflow: ellipsis;
	}

	.bar .action-buttons {
	position: absolute;
	top: 0;
	right: 0;
	padding: inherit;
	}

	.bar .action-buttons ul {
	list-style: none;
	padding: 0;
	margin: 0;
	}

	.bar .action-buttons ul li {
	display:inline-block;
	}

	.bar .action-buttons ul li a {
	text-decoration: none;
	color: inherit;
	font-size:0.9em;
	transition: color .3s;
	}

	.bar .action-buttons ul li a:hover {
	color: red;
	}

	.bar.one .title {
	padding-right: 20px;
	}
	</style>
	</head>
	<body>

	<div class="bar one">
	<div class="bar-inner one">
	<div class="title"> <strong>[ICON]</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus</div>
	<div class="action-buttons">
	<ul><li><a href="#">X</a></li></ul>
	</div>
	</div>
	</div>
	</body>
	</html>