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;
    position: relative;
}
.panel-heading a:after {
    font-family:'Glyphicons Halflings';
    content:"\e114";
    position: absolute;
    top:50%;
    left:100%;
    -webkit-transform:translate(-100%, -50%);
    transform:translate(-100%, -50%);
    color: grey;
}
.panel-heading a.collapsed:after {
    content:"\e080";
}