SendGrid style-guide split card

card-split.html

<div class="card is-split">
  <h2>Estimate Your Cost</h2>
  <p class="small">Use this calculator to help identify which plan is the best deal for you.</p>
  <div class="split-content">
    <h3>Pay Per Email</h3>
    <p class="details small"><span><strong>150,000</strong> <span class="has-underline" data-tooltip="Based on the number of emails you send through Marketing Campaigns, not how many people send to." data-tooltip-pos="up" data-tooltip-length="large">emails per month</span></span> <span>$37.50/mo*</span></p>
    <div class="input-range-wrap">
      <input id="input-range-emails" type="range" min="0" max="100" value="15">
    </div>
    <hr class="has-label" data-label="or">
    <h3>Pay Per Contact</h3>
    <p class="details small"><span><strong>100,000</strong> <span class="has-underline" data-tooltip="Based on the number of unique email addresses you store in Marketing Campaigns, not how often you send to them." data-tooltip-pos="up" data-tooltip-length="large">contacts stored</span></span> <span>$100.00/mo*</span></p>
    <div class="input-range-wrap">
      <input id="input-range-contacts" type="range" min="0" max="100" value="15">
    </div>
  </div>
</div>