JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div style="box-sizing: border-box; width: 100%; max-width: 100%; display: flex; flex-wrap: wrap; align-items: center">
  <h3 style="flex: 1; flex-wrap: wrap; white-space: nowrap">
    Some kind of page title
  </h3>
  <div class="btn-group" role="group" aria-label="User Categories" style="width: auto; min-width: 0; white-space: nowrap">
    <button type="button" class="btn btn-default-grey btn-sm storyFilter" data-storyfilter-category="ReadLater" data-results-target="#storyList" data-toggle="tooltip" data-placement="bottom" title="Read Later">
      <i style="margin-top:4px" class="glyphicon glyphicon-bookmark" aria-hidden="true"></i>
    </button>
    <button type="button" class="btn btn-default-grey btn-sm storyFilter" data-storyfilter-category="PlanToUse" data-results-target="#storyList" data-toggle="tooltip" data-placement="bottom" title="Plan To Use">
      <i style="margin-top:4px" class="glyphicon glyphicon-pushpin" aria-hidden="true"></i>
    </button>
    <button type="button" class="btn btn-default-grey btn-sm storyFilter" data-storyfilter-category="Used" data-results-target="#storyList" data-toggle="tooltip" data-placement="bottom" title="Used">
      <i style="margin-top:4px" class="glyphicon glyphicon-check" aria-hidden="true"></i>
    </button>
    <button type="button" class="btn btn-default-grey btn-sm storyFilter" data-storyfilter-category="Submitted" data-results-target="#storyList" data-toggle="tooltip" data-placement="bottom" title="My Stories">
      <i style="margin-top:4px" class="glyphicon glyphicon-list-alt" aria-hidden="true"></i>
    </button>
  </div>
</div>