<div>
  <div class="row relation-row" style="margin-bottom: 5px;">
    <div class="large-10 columns">
      <h5 data-dojo-attach-point="loadingMatchesNode" style="display: none;"><i class="fa fa-spinner fa-pulse"></i>&nbsp;Loading matches..</h5>
    </div>
    <div class="large-2 columns">
      <a style="float: right;" href="#" class="button tiny" data-dojo-attach-event="onClick: _addMatches" title="Add match">Add Match&nbsp;&nbsp;<i class="fa fa-plus"></i></a>
    </div>
  </div>
  <div class="row relation-row">
    <div class="large-12 columns">
      <p>Broad</p>
    </div>
  </div>
  <div class="row large-12 columns"
       data-dojo-attach-point="broadGridNode">
  </div>

  <div class="row relation-row">
    <div class="large-12 columns">
      <p>Close</p>
    </div>
  </div>
  <div class="row large-12 columns"
       data-dojo-attach-point="closeGridNode">
  </div>

  <div class="row relation-row">
    <div class="large-12 columns">
      <p>Exact</p>
    </div>
  </div>
  <div class="row large-12 columns"
       data-dojo-attach-point="exactGridNode">
  </div>

  <div class="row relation-row">
    <div class="large-12 columns">
      <p>Narrow</p>
    </div>
  </div>
  <div class="row large-12 columns"
       data-dojo-attach-point="narrowGridNode">
  </div>

  <div class="row relation-row">
    <div class="large-12 columns">
      <p>Related</p>
    </div>
  </div>
  <div class="row large-12 columns"
       data-dojo-attach-point="relatedGridNode">
  </div>
</div>