SendGrid style-guide plan table

tables-billing-plan.html

<table class="table-wrap is-billing">
  <tr>
    <th>Base Plan</th>
    <td>
      <p>Pro 100K</p>
      <p class="plan-details">100,000 emails/mo</p>
      <button class="btn btn-small btn-secondary">Change Plan</button>
    </td>
    <td>
      $67.96
      <span class="price-note">15% bundle discount</span>
    </td>
  </tr>
  <tr>
    <td class="has-alert" colspan="3">
      <div class="alert alert-warning">
        <p>Your account will be downgraded to <strong>Essentials 40K</strong> on 7/1/2019.</p>
      </div>
    </td>
  </tr>
  <tr class="has-rowspan">
    <th rowspan="2">Additional Charges</th>
    <td>
      <p>8,471 additional emails (<a href="#">108,471 sent this month</a>)</p>
      <p class="plan-details">$0.00085 each</p>
    </td>
    <td>$7.20</td>
  </tr>
  <tr>
    <td>
      <p>5,432 billable contacts (<a href="#">7,432 total contacts</a>)</p>
      <p class="plan-details">2,000 contacts free, then $10/mo per 10,000 contacts</p>
    </td>
    <td>$10.00</td>
  </tr>
  <tr class="has-rowspan">
    <th rowspan="2">Add-Ons</th>
    <td>
      <p>1 additional dedicated IP address (<a href="#">2 total dedicated IPs</a>)</p>
      <p class="plan-details">1 IP free, then $30/mo each</p>
    </td>
    <td>$30.00</td>
  </tr>
  <tr>
    <td>
      <p class="plan-disabled"><em>No additional Email Activity History</em> <a href="#">What is this?</a></p>
      <p class="plan-disabled"><em>3 days of history free, $30/mo for 30 days of history</em></p>
      <button class="btn btn-small btn-secondary is-disabled">Add Additional History</button>
    </td>
    <td>
      <p class="plan-disabled"><em>$0.00</em></p>
    </td>
  </tr>
  <tr class="billing-total">
    <td colspan="3">
      <p>Estimate for June <strong>$127.15*</strong></p>
    </td>
  </tr>
</table>