JSFiddle - React, Tailwind, and code Playground

by Derek Leung

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="block">
				<div class="progress progress-striped active">
					<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
						Remaining Time: 13s
					</div>
				</div>
				<div class="btn-group">
					<button type="button" class="btn btn-default btn-xs" title="Delete"><gly icon="trash"></gly></button>
					<button type="button" class="btn btn-default btn-xs" title="Toggle Repeat"><gly icon="repeat"></gly></button>
				</div>
				<div class="message">This is a message.</div>
			</div>

CSS

.block > * {
    vertical-align: middle;
}
.block > .progress {
    margin-bottom: 0px;
    display: inline-block;
    width: -webkit-calc(100% - 51px);
}

JavaScript

$("gly").each(function () {
    $("<span>").addClass("glyphicon glyphicon-" + $(this).attr("icon") + " " + $(this).attr("class")).insertAfter(this);
    $(this).remove();
});