JSFiddle - React, Tailwind, and code Playground

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 id="panel-1" class="panel panel-default">
    <div class="panel-heading clearfix">
         <h4 class="panel-title heading">
        <div class="pull-left">
      <button type="button" class="btn btn-default some-button">
        button!
      </button>
    </div>
      <a>
        Some string (short)
      </a>
        <div class="btn-group pull-right">
      <button type="button" class="btn btn-default">a</button>
      <button type="button" class="btn btn-default">b</button>
      <button type="button" class="btn btn-default">c</button>
    </div>
    </h4>

    </div>
</div>
<div id="panel-2" class="panel panel-default">
    <div class="panel-heading clearfix">
         <h4 class="panel-title heading">
        <div class="pull-left celll">
      <button type="button" class="btn btn-default some-button">
        button!
      </button>
    </div>
      <a>
        Some string that's really longish and stuff hehe right? (looooong long long)
      </a>
        <div class="btn-group pull-right">
      <button type="button" class="btn btn-default">a</button>
      <button type="button" class="btn btn-default">b</button>
      <button type="button" class="btn btn-default">c</button>
    </div>
    </h4>

    </div>
</div>

CSS

.heading {
    font-size: 20px;
    padding-left: 10px;
    text-align: center;
    word-wrap: break-word;
}