JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="container">
  <h1>Multiple lines</h1>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseActivity1" class="collapsed">
          Truck maintenance<br />
          <small>Monday till Wednesday</small>
        </a>
      </h3>
    </div>
    <div id="collapseActivity1" class="panel-collapse collapse">
      <div class="panel-body">
        Lorem ipsum dolor sit amet.
      </div>
    </div>
    <div class="panel-footer">
      <span class="glyphicon glyphicon-user"></span>
      John, Michael and Frank.
    </div>
  </div>

  <h1>Single line</h1>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseActivity2" class="collapsed">
          Truck cleanup
        </a>
      </h3>
    </div>
    <div id="collapseActivity2" class="panel-collapse collapse">
      <div class="panel-body">
        Lorem ipsum dolor sit amet.
      </div>
    </div>
    <div class="panel-footer">
      <span class="glyphicon glyphicon-user"></span>
      John, Michael and Frank.
    </div>
  </div>
</div>

CSS

.panel-heading a {
    text-decoration: none;
    display: block;
}
.panel-heading a:after {
    font-family:'Glyphicons Halflings';
    content:"\e114";
    float: right;
    color: grey;
}
.panel-heading a.collapsed:after {
    content:"\e080";
}