SendGrid style-guide field mapping

field-mapping.html

<div class="field-mapping-wrap">
  <div class="field-mapping-header">
    <p class="field-mapping-title">email</p>
    <p class="field-mapping-status"><i class="sg-icon sg-icon-check-circle"></i>Mapped</p>
  </div>
  <div class="field-mapping-list">
    <div class="row">
      <div class="col-4">
        <div class="input-select-wrap is-required">
          <label class="input-select-label" for="select2-example-default">Field mapped to:</label>
          <select class="input-select2" id="select2-example-default" data-placeholder="Select a field">
            <option></option>
            <option>email</option>
            <option>first_name</option>
            <option>last_name</option>
          </select>
        </div>
      </div>
      <div class="col-4">
        <p class="field-mapping-map-type"><i class="sg-icon sg-icon-text-only"></i>Text</p>
        <button class="btn btn-small btn-secondary has-icon"><i class="sg-icon sg-icon-pencil"></i>Edit Field</button>
      </div>
      <div class="col-4">
        <div class="input-checkbox-wrap">
          <input type="checkbox" id="checkbox-skip" value="skip">
          <label class="input-checkbox-label" for="checkbox-skip">Skip Column</label>
        </div>
      </div>
    </div>
  </div>
  <div class="field-mapping-list">
    <div class="row">
      <div class="col-12">
        <p>example@example.com</p>
      </div>
    </div>
  </div>
  <div class="field-mapping-list">
    <div class="row">
      <div class="col-12">
        <p>rich.bachman@sendgrid.com</p>
      </div>
    </div>
  </div>
  <div class="field-mapping-list">
    <div class="row">
      <div class="col-12">
        <p>jason.walker@sendgrid.com</p>
      </div>
    </div>
  </div>
  <div class="field-mapping-list">
    <div class="row">
      <div class="col-12">
        <p>&hellip;</p>
      </div>
    </div>
  </div>
</div>