JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<body>
  <div class="container">
    <!-- <p class="text-info citations-empty">Something</p> -->
    <div class="row" style="margin-top: 10px;">
      <div class="span9 citation-text">
        <p class="citation-text">Here is a ton of text that is supposed to be a citation
        but I'm hoping it'll wrap that's why it's not a citation. And yet it doesn't wrap
        so it looks like I'll have to keep writing and writing until it does.</p>
      </div>

      <div class="span3 vertical-btn-group citation-options">
        <input type="button" class="btn btn-small btn-block btn-info citation-edit"
        value="Edit" /> <input type="button" class=
        "btn btn-small btn-block btn-danger citation-remove" value="Remove" />
        <input type="button" class=
        "btn btn-small btn-block btn-warning citation-highlight" value="Highlight" />
      </div>
    </div>
    <hr />

    <div class="row">
      <div class="span9 citation-text">
        <p class="citation-text">Here is a ton of text that is supposed to be a citation
        but I'm hoping it'll wrap that's why it's not a citation. And yet it doesn't wrap
        so it looks like I'll have to keep writing and writing until it does.</p>
      </div>

      <div class="span3 vertical-btn-group citation-options">
        <input type="button" class="btn btn-small btn-block btn-info citation-edit"
        value="Edit" /> <input type="button" class=
        "btn btn-small btn-block btn-danger citation-remove" value="Remove" />
        <input type="button" class=
        "btn btn-small btn-block btn-warning citation-highlight" value="Highlight" />
      </div>
    </div>
  </div>
</body>