JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="well well-sm shadow">
<div class="row">
<div class="panel-group">
<div class="col-xs-10">
<i class="glyphicon glyphicon-align-left debit_colour"></i> <strong>Budgets</strong>
</div>
<div class="col-xs-2 text-right">
<a data-toggle="collapse" data-parent="#closed" href="#collapseClosed" aria-expanded="true" class="">
<span class="glyphicon text-right glyphicon-chevron-up" id="toggle-budgets"></span>
</a>
</div>
</div>
<div id="collapseClosed" class="panel-collapse collapse in" aria-expanded="true">
<div class="col-xs-12">
<small><a href="/Budget/EditBudget/jhjkhjhkh">Craig's Weekly</a></small><br>
<small> $69.60 of $50.00</small>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="139.00" aria-valuemin="0" aria-valuemax="100" style="width: 139.00%">
<small>139.00%</small>
</div>
</div>
</div>
<div class="col-xs-12">
<small><a href="/Budget/EditBudget/767887">Melanie's Weekly</a></small><br>
<small> $33.45 of $30.00</small>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="112.00" aria-valuemin="0" aria-valuemax="100" style="width: 112.00%">
<small>112.00%</small>
</div>
</div>
</div>
<div class="col-xs-12">
<small><a href="/Budget/EditBudget/rtretrrte">Family Weekend...
CSS
body {
padding: 50px;
}