JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/bootstrap-glyphicons.css">
<table style="width: 100%;">
<tbody><tr>
<td>
<button class="btn btn-primary btn-xs" style="margin-bottom: 5px;">Monday</button>
</td>
<td>
<div class="progress" style="display: inline-block">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="8" aria-valuemin="0" aria-valuemax="100" style="width: 8%;">
% 8<br> </div>
</div>
</td>
</tr>
<tr>
<td>
<button class="btn btn-primary btn-xs" style="margin-bottom: 5px;">Tuesday</button>
</td>
<td>
<div class="progress" style="display: 1inline-block">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="19" aria-valuemin="0" aria-valuemax="100" style="width: 19%;">
% 19<br> </div>
</div>
</td>
</tr>
<tr>
<td>
<button class="btn btn-primary btn-xs" style="margin-bottom:...
CSS
.progress-bar {
overflow-x:visible;
white-space:nowrap;
color:black; /* color is for demo purposes */
}