Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <fieldset>
  <legend>Project Attributes</legend>
  <div class="wrapper">
  <div class="grid-row">
    <label>
      <input type="checkbox" value="impact" name="consult-sig-sme"> <span>This is a service that already exists in another segment</span>
    </label>
  </div>
  <div class="grid-row">
    <label>
      <input type="checkbox" value="impact" name="consult-sig-sme"> <span>There are notable risks and/or concerns</span>
    </label>
  </div>
  <div class="grid-row">
    <label>
      <input type="checkbox" value="impact" name="consult-sig-sme"> <span>There are constraints and/or dependencies of the service.</span>
    </label>
  </div>
  <div class="grid-header">
      <div class="header-item"></div>
      <div class="header-item">
        <div>Critical</div>
      </div>
      <div class="header-item">High</div>
      <div class="header-item">Medium</div>
      <div class="header-item">Low</div>
    </div>
    <div class="grid-row">
      <div class="flex-item">Priority (Critical and High require justification)</div>
      <label class="flex-item">
        <input type="radio" value="critical" name="priority"> <span></span>
      </label>
      <label class="flex-item">
        <input type="radio" value="high" name="priority"> <span></span>
      </label>
      <label class="flex-item">
        <input type="radio" value="medium" name="priority"> <span></span>
      </label>
      <label class="flex-item">
        <input type="radio" value="low" name="priority"> <span></span>
      </label>
    </div>
  
  <div class="sig-section-comments">
    <label>Comments</label>
    <textarea rows=5></textarea>
  </div>
  <div>
    <button class="btn btn-save">Save Progress</button>
  </div>
</fieldset>

<fieldset>
  <legend>Systems Impacted</legend>
  <div class="wrapper">
    <div class="grid-header">
      <div class="header-item"></div>
      <div class="header-item">
        <div>Impact</div>
      </div>
      <div class="header-item">No Impact</div>
      <div class="header-item">Not Reviewed</div>
    </div>
    <div class="grid-row">
      <div class="flex-item">16-bit Librarian Tool Bar - Plan Copy</div>
      <label class="flex-item">
          <input type="radio" value="impact" name="librarian-toolbar"> <span></span>
        </label>

      <label class="flex-item">
           <input type="radio" value="no-impact" name="librarian-toolbar"> <span></span>
        </label>
      <label class="flex-item">
          <input type="radio" value="not-reviewed" name="librarian-toolbar"> <span></span>
        </label>
    </div>
    <div class="grid-row">
      <div class="flex-item">AAROW</div>
      <label class="flex-item">
          <input type="radio" value="impact" name="aariw"> <span></span>
        </label>

      <label class="flex-item">
           <input type="radio" value="no-impact" name="aariw"> <span></span>
        </label>
      <label class="flex-item">
          <input type="radio" value="not-reviewed" name="aariw"> <span></span>
        </label>
    </div>
    <div class="grid-row">
      <div class="flex-item">AAROW 411a11</div>
      <label class="flex-item">
          <input type="radio" value="impact" name="aarow-411"> <span></span>
        </label>

      <label class="flex-item">
           <input type="radio" value="no-impact" name="aarow-411"> <span></span>
        </label>
      <label class="flex-item">
          <input type="radio" value="not-reviewed" name="aarow-411"> <span></span>
        </label>
    </div>
    <div class="grid-row">
      <div class="flex-item">AAROW Auto-Solutions Template</div>
      <label class="flex-item">
          <input type="radio" value="impact" name="aarow-solutions"> <span></span>
        </label>

      <label class="flex-item">
           <input type="radio" value="no-impact" name="aarow-solutions"> <span></span>
        </label>
      <label class="flex-item">
          <input type="radio" value="not-reviewed" name="aarow-solutions"> <span></span>
        </label>
    </div>
    <div class="grid-row">
      <div class="flex-item">AAROW IOM</div>
      <label class="flex-item">
          <input type="radio" value="impact" name="aarow-iom"> <span></span>
        </label>

      <label class="flex-item">
           <input type="radio" value="no-impact" name="aarow-iom"> <span></span>
        </label>
      <label class="flex-item">
          <input type="radio" value="not-reviewed" name="aarow-iom"> <span></span>
        </label>
    </div>
    <div class="grid-row">
      <div class="flex-item">AAROW Workstation Setup Form</div>
      <label class="flex-item">
          <input type="radio" value="impact" name="aarow-workstation"> <span></span>
        </label>
      <label class="flex-item">
           <input type="radio" value="no-impact" name="aarow-workstation"> <span></span>
        </label>
      <label class="flex-item">
          <input type="radio" value="not-reviewed" name="aarow-workstation"> <span></span>
        </label>
    </div>
    <div class="grid-row">
      <div class="flex-item">Adhoc Reporting</div>
      <label class="flex-item">
          <input type="radio" value="impact" name="adhoc-reporting"> <span></span>
        </label>
      <label class="flex-item">
           <input type="radio" value="no-impact" name="adhoc-reporting"> <span></span>
        </label>
      <label class="flex-item">
          <input type="radio" value="not-reviewed" name="adhoc-reporting"> <span></span>
        </label>
    </div>
    <div class="grid-row">
      <div class="flex-item">ART</div>
      <label class="flex-item">
          <input type="radio" value="impact" name="art"> <span></span>
        </label>
      <label class="flex-item">
           <input type="radio" value="no-impact" name="art"> <span></span>
        </label>
      <label class="flex-item">
          <input type="radio" value="not-reviewed" name="art"> <span></span>
        </label>
    </div>
    <div class="grid-row">
      <div class="flex-item">Channels (PSW, NB, VRS, DC Workstation)</div>
      <label class="flex-item">
          <input type="radio" value="impact" name="channels"> <span></span>
        </label>
      <label class="flex-item">
           <input type="radio" value="no-impact" name="channels"> <span></span>
        </label>
      <label class="flex-item">
          <input type="radio" value="not-reviewed" name="channels"> <span></span>
        </label>
    </div>
    <div class="grid-row">
      <div class="flex-item">Check Bug &amp; Issues List</div>
      <label class="flex-item">
          <input type="radio" value="impact" name="check-bug-list"> <span></span>
        </label>
      <label class="flex-item">
           <input type="radio" value="no-impact" name="check-bug-list"> <span></span>
        </label>
      <label class="flex-item">
          <input type="radio" value="not-reviewed" name="check-bug-list"> <span></span>
        </label>
    </div>
    <div class="grid-row">
      <div class="flex-item">DC Research Rules Tool (SBR Query)</div>
      <label class="flex-item">
          <input type="radio" value="impact" name="dc-research"> <span></span>
        </label>
      <label class="flex-item">
          <input type="radio" value="no-impact" name="dc-research"> <span></span>
        </label>
      <label class="flex-item">
          <input type="radio" value="not-reviewed" name="dc-research"> <span></span>
        </label>
    </div>
    <div class="grid-row">
      <div class="flex-item">FBSI</div>
      <label class="flex-item">
        <input type="radio" value="impact" name="fbsi"> <span></span>
      </label>
      <label class="flex-item">
        <input type="radio" value="no-impact" name="fbsi"> <span></span>
      </label>
      <label class="flex-item">
        <input type="radio" value="not-reviewed" name="fbsi"> <span></span>
      </label>
    </div>
    <div class="grid-row">
      <div class="flex-item">FITE (CUSQA)</div>
      <label class="flex-item">
        <input type="radio" value="impact" name="fite"> <span></span>
      </label>
      <label class="flex-item">
        <input type="radio" value="no-impact" name="fite"> <span></span>
      </label>
      <label class="flex-item">
        <input type="radio" value="not-reviewed" name="fite"> <span></span>
      </label>
    </div>
    <div class="grid-row">
      <div class="flex-item">FPRS IDW Logging Database</div>
      <label class="flex-item">
        <input type="radio" value="impact" name="fprs-idw"> <span></span>
      </label>
      <label class="flex-item">
        <input type="radio" value="no-impact" name="fprs-idw"> <span></span>
      </label>
      <label class="flex-item">
        <input type="radio" value="not-reviewed" name="fprs-idw"> <span></span>
      </label>
    </div>
    <div class="grid-row">
      <div class="flex-item">FPRS</div>
      <label class="flex-item">
        <input type="radio" value="impact" name="fprs"> <span></span>
      </label>
      <label class="flex-item">
        <input type="radio" value="no-impact" name="fprs"> <span></span>
      </label>
      <label class="flex-item">
        <input type="radio" value="not-reviewed" name="fprs"> <span></span>
      </label>
    </div>
    <div class="grid-row">
      <div class="flex-item">Fund Action Tool/IPW</div>
      <label class="flex-item">
        <input type="radio" value="impact" name="fund-action-tool"> <span></span>
      </label>
      <label class="flex-item">
        <input type="radio" value="no-impact" name="fund-action-tool"> <span></span>
      </label>
      <label class="flex-item">
        <input type="radio" value="not-reviewed" name="fund-action-tool"> <span></span>
      </label>
    </div>
    <div class="grid-row">
      <div class="flex-item">IOM/Go Live</div>
      <label class="flex-item">
        <input type="radio" value="impact" name="iom"> <span></span>
      </label>
      <label class="flex-item">
        <input type="radio" value="no-impact" name="iom"> <span></span>
      </label>
      <label class="flex-item">
        <input type="radio" value="not-reviewed" name="iom"> <span></span>
      </label>
    </div>
    <div class="grid-row">
      <div class="flex-item">GFA Reporting &amp; Automation</div>
      <label class="flex-item">
        <input type="radio" value="impact" name="gfa-reporting"> <span></span>
      </label>
      <label class="flex-item">
        <input type="radio" value="no-impact" name="gfa-reporting"> <span></span>
      </label>
      <label class="flex-item">
        <input type="radio" value="not-reviewed" name="gfa-reporting"> <span></span>
      </label>
    </div>
    <div class="grid-row">
      <div class="flex-item">HSA (requirements doc, WIPC)</div>
      <label class="flex-item">
        <input type="radio" value="impact" name="hsa"> <span></span>
      </label>
      <label class="flex-item">
        <input type="radio" value="no-impact" name="hsa"> <span></span>
      </label>
      <label class="flex-item">
        <input type="radio" value="not-reviewed" name="hsa"> <span></span>
      </label>
    </div>
    <div class="grid-row">
      <div class="flex-item">Metaframe (CITRIX)</div>
      <label class="flex-item">
        <input type="radio" value="impact" name="metaframe"> <span></span>
      </label>
      <label class="flex-item">
        <input type="radio" value="no-impact" name="metaframe"> <span></span>
      </label>
      <label class="flex-item">
        <input type="radio" value="not-reviewed" name="metaframe"> <span></span>
      </label>
    </div>
    <div class="grid-row">
      <div class="flex-item">OSCAR (NB, Inst Voice, DC Workstation, Plan Sponsor)</div>
      <label class="flex-item">
        <input type="radio" value="impact" name="oscar"> <span></span>
      </label>
      <label class="flex-item">
        <input type="radio" value="no-impact" name="oscar"> <span></span>
      </label>
      <label class="flex-item">
        <input type="radio" value="not-reviewed" name="oscar"> <span></span>
      </label>
    </div>
    <div class="grid-row">
      <div class="flex-item">OSCAR/NBCPT</div>
      <label class="flex-item">
        <input type="radio" value="impact" name="oscar-nbcpt"> <span></span>
      </label>
      <label class="flex-item">
        <input type="radio" value="no-impact" name="oscar-nbcpt"> <span></span>
      </label>
      <label class="flex-item">
        <input type="radio" value="not-reviewed" name="oscar-nbcpt"> <span></span>
      </label>
    </div>
    <div class="grid-row">
      <div class="flex-item">PAM</div>
      <label class="flex-item">
        <input type="radio" value="impact" name="pam"> <span></span>
      </label>
      <label class="flex-item">
        <input type="radio" value="no-impact" name="pam"> <span></span>
      </label>
      <label class="flex-item">
        <input type="radio" value="not-reviewed" name="pam"> <span></span>
      </label>
    </div>
    <div class="grid-row">
      <div class="flex-item">Participant Disclosure (SBR/TBR Template Messages)</div>
      <label class="flex-item">
        <input type="radio" value="impact" name="part-disclosure-impact"> <span></span>
      </label>
      <label class="flex-item">
        <input type="radio" value="no-impact" name="part-disclosure-impact"> <span></span>
      </label>
      <label class="flex-item">
        <input type="radio" value="not-reviewed" name="part-disclosure-impact"> <span></span>
      </label>
    </div>
    <div class="grid-row">
      <div class="flex-item">PLRS</div>
      <label class="flex-item">
        <input type="radio" value="impact" name="plrs"> <span></span>
      </label>
      <label class="flex-item">
        <input type="radio" value="no-impact" name="plrs"> <span></span>
      </label>
      <label class="flex-item">
        <input type="radio" value="not-reviewed" name="plrs"> <span></span>
      </label>
    </div>
    <div class="grid-row">
      <div class="flex-item">PMO</div>
      <label class="flex-item">
        <input type="radio" value="impact" name="pmo"> <span></span>
      </label>
      <label class="flex-item">
        <input type="radio" value="no-impact" name="pmo"> <span></span>
      </label>
      <label class="flex-item">
        <input type="radio" value="not-reviewed" name="pmo"> <span></span>
      </label>
    </div>
    <div class="grid-row">
      <div class="flex-item">PRT (A&amp;T Plan Reporting Tool)</div>
      <label class="flex-item">
        <input type="radio" value="impact" name="prt"> <span></span>
      </label>
      <label class="flex-item">
        <input type="radio" value="no-impact" name="prt"> <span></span>
      </label>
      <label class="flex-item">
        <input type="radio" value="not-reviewed" name="prt"> <span></span>
      </label>
    </div>
    <div class="grid-row">
      <div class="flex-item">WPDT</div>
      <label class="flex-item">
        <input type="radio" value="impact" name="wpdt"> <span></span>
      </label>
      <label class="flex-item">
        <input type="radio" value="no-impact" name="wpdt"> <span></span>
      </label>
      <label class="flex-item">
        <input type="radio" value="not-reviewed" name="wpdt"> <span></span>
      </label>
    </div>
    <div class="grid-row">
      <div class="flex-item">WPDT UI Standarts (Kendo, Oracle)</div>
      <label class="flex-item">
        <input type="radio" value="impact" name="wpdt-ui"> <span></span>
      </label>
      <label class="flex-item">
        <input type="radio" value="no-impact" name="wpdt-ui"> <span></span>
      </label>
      <label class="flex-item">
        <input type="radio" value="not-reviewed" name="wpdt-ui"> <span></span>
      </label>
    </div>
    <div class="grid-row">
      <div class="flex-item">WPDT Logging Database/OBEII</div>
      <label class="flex-item">
        <input type="radio" value="impact" name="wpdt-logging"> <span></span>
      </label>
      <label class="flex-item">
        <input type="radio" value="no-impact" name="wpdt-logging"> <span></span>
      </label>
      <label class="flex-item">
        <input type="radio" value="not-reviewed" name="wpdt-logging"> <span></span>
      </label>
    </div>
    <div class="grid-row">
      <div class="flex-item">XTRAC - new xtrac fields or qre</div>
      <label class="flex-item">
        <input type="radio" value="impact" name="xtrac-new"> <span></span>
      </label>
      <label class="flex-item">
        <input type="radio" value="no-impact" name="xtrac-new"> <span></span>
      </label>
      <label class="flex-item">
        <input type="radio" value="not-reviewed" name="xtrac-new"> <span></span>
      </label>
    </div>
    <div class="grid-row">
      <div class="flex-item">XTRAC (including type/subtype, cause/subcause)</div>
      <label class="flex-item">
        <input type="radio" value="impact" name="xtrac"> <span></span>
      </label>
      <label class="flex-item">
        <input type="radio" value="no-impact" name="xtrac"> <span></span>
      </label>
      <label class="flex-item">
        <input type="radio" value="not-reviewed" name="xtrac"> <span></span>
      </label>
    </div>
    <div class="grid-row">
      <div class="flex-item">XTRAC Reporting</div>
      <label class="flex-item">
        <input type="radio" value="impact" name="xtrac-reporting"> <span></span>
      </label>
      <label class="flex-item">
        <input type="radio" value="no-impact" name="xtrac-reporting"> <span></span>
      </label>
      <label class="flex-item">
        <input type="radio" value="not-reviewed" name="xtrac-reporting"> <span></span>
      </label>
    </div>
    <div class="grid-row">
      <div class="flex-item">XTRAC Routing</div>
      <label class="flex-item">
        <input type="radio" value="impact" name="xtrac-routing"> <span></span>
      </label>
      <label class="flex-item">
        <input type="radio" value="no-impact" name="xtrac-routing"> <span></span>
      </label>
      <label class="flex-item">
        <input type="radio" value="not-reviewed" name="xtrac-routing"> <span></span>
      </label>
    </div>
    <div class="grid-row">
      <div class="flex-item">XTRAC Splits (to/from partner)</div>
      <label class="flex-item">
        <input type="radio" value="impact" name="xtrac-splits"> <span></span>
      </label>
      <label class="flex-item">
        <input type="radio" value="no-impact" name="xtrac-splits"> <span></span>
      </label>
      <label class="flex-item">
        <input type="radio" value="not-reviewed" name="xtrac-splits"> <span></span>
      </label>
    </div>
    <div class="grid-row">
      <div class="flex-item">Other SIG Project Systems Impact</div>
      <label class="flex-item">
        <input type="radio" value="impact" name="other-impact"> <span></span>
      </label>
      <label class="flex-item">
        <input type="radio" value="no-impact" name="other-impact"> <span></span>
      </label>
      <label class="flex-item">
        <input type="radio" value="not-reviewed" name="other-impact"> <span></span>
      </label>
    </div>
  </div>
  <div class="sig-section-comments">
    <label>Comments</label>
    <textarea rows=5></textarea>
  </div>
  <div>
    <button class="btn btn-save">Save Progress</button>
  </div>

</fieldset>

<fieldset>
  <legend>SIG Updates</legend>
  <div class="wrapper">
    <div class="grid-header">
      <div class="header-item"></div>
      <div class="header-item">
        <div>Impact</div>
      </div>
      <div class="header-item">No Impact</div>
      <div class="header-item">Not Reviewed</div>
    </div>
  </div>
  <div class="grid-row">
    <div class="flex-item">ECM/Advisor Plan Setup Checklist</div>
    <label class="flex-item">
      <input type="radio" value="impact" name="ecm-checklist"> <span></span>
    </label>
    <label class="flex-item">
      <input type="radio" value="no-impact" name="ecm-checklist"> <span></span>
    </label>
    <label class="flex-item">
      <input type="radio" value="not-reviewed" name="ecm-checklist"> <span></span>
    </label>
  </div>
  <div class="grid-row">
    <div class="flex-item">Forms (CSF, DOCGEN)</div>
    <label class="flex-item">
      <input type="radio" value="impact" name="forms"> <span></span>
    </label>
    <label class="flex-item">
      <input type="radio" value="no-impact" name="forms"> <span></span>
    </label>
    <label class="flex-item">
      <input type="radio" value="not-reviewed" name="forms"> <span></span>
    </label>
  </div>
  <div class="grid-row">
    <div class="flex-item">FPRS Macro</div>
    <label class="flex-item">
      <input type="radio" value="impact" name="fprs-macro"> <span></span>
    </label>
    <label class="flex-item">
      <input type="radio" value="no-impact" name="fprs-macro"> <span></span>
    </label>
    <label class="flex-item">
      <input type="radio" value="not-reviewed" name="fprs-macro"> <span></span>
    </label>
  </div>
  <div class="grid-row">
    <div class="flex-item">FPRS Prototypes</div>
    <label class="flex-item">
      <input type="radio" value="impact" name="fprs-prototypes"> <span></span>
    </label>
    <label class="flex-item">
      <input type="radio" value="no-impact" name="fprs-prototypes"> <span></span>
    </label>
    <label class="flex-item">
      <input type="radio" value="not-reviewed" name="fprs-prototypes"> <span></span>
    </label>
  </div>
  <div class="grid-row">
    <div class="flex-item">IPW</div>
    <label class="flex-item">
      <input type="radio" value="impact" name="ipw"> <span></span>
    </label>
    <label class="flex-item">
      <input type="radio" value="no-impact" name="ipw"> <span></span>
    </label>
    <label class="flex-item">
      <input type="radio" value="not-reviewed" name="ipw"> <span></span>
    </label>
  </div>
  <div class="grid-row">
    <div class="flex-item">Mass Updates (Script for OSCAR, DSR, FPRS Macro, xtrac creator)</div>
    <label class="flex-item">
      <input type="radio" value="impact" name="mass-updates"> <span></span>
    </label>
    <label class="flex-item">
      <input type="radio" value="no-impact" name="mass-updates"> <span></span>
    </label>
    <label class="flex-item">
      <input type="radio" value="not-reviewed" name="mass-updates"> <span></span>
    </label>
  </div>
  <div class="grid-row">
    <div class="flex-item">MCM/LCM Live Date Checklist</div>
    <label class="flex-item">
      <input type="radio" value="impact" name="mcm-checklist"> <span></span>
    </label>
    <label class="flex-item">
      <input type="radio" value="no-impact" name="mcm-checklist"> <span></span>
    </label>
    <label class="flex-item">
      <input type="radio" value="not-reviewed" name="mcm-checklist"> <span></span>
    </label>
  </div>
  <div class="grid-row">
    <div class="flex-item">PIW</div>
    <label class="flex-item">
      <input type="radio" value="impact" name="piw"> <span></span>
    </label>
    <label class="flex-item">
      <input type="radio" value="no-impact" name="piw"> <span></span>
    </label>
    <label class="flex-item">
      <input type="radio" value="not-reviewed" name="piw"> <span></span>
    </label>
  </div>
  <div class="grid-row">
    <div class="flex-item">Participant Disclosure</div>
    <label class="flex-item">
      <input type="radio" value="impact" name="part-disclosure-update"> <span></span>
    </label>
    <label class="flex-item">
      <input type="radio" value="no-impact" name="part-disclosure-update"> <span></span>
    </label>
    <label class="flex-item">
      <input type="radio" value="not-reviewed" name="part-disclosure-update"> <span></span>
    </label>
  </div>
  <div class="grid-row">
    <div class="flex-item">Procedures (OLR and EDMS)</div>
    <label class="flex-item">
      <input type="radio" value="impact" name="procedures"> <span></span>
    </label>
    <label class="flex-item">
      <input type="radio" value="no-impact" name="procedures"> <span></span>
    </label>
    <label class="flex-item">
      <input type="radio" value="not-reviewed" name="procedures"> <span></span>
    </label>
  </div>
  <div class="grid-row">
    <div class="flex-item">Questionnaire Updates</div>
    <label class="flex-item">
      <input type="radio" value="impact" name="questionnaire"> <span></span>
    </label>
    <label class="flex-item">
      <input type="radio" value="no-impact" name="questionnaire"> <span></span>
    </label>
    <label class="flex-item">
      <input type="radio" value="not-reviewed" name="questionnaire"> <span></span>
    </label>
  </div>
  <div class="grid-row">
    <div class="flex-item">SBR Governance</div>
    <label class="flex-item">
      <input type="radio" value="impact" name="sbr-governance"> <span></span>
    </label>
    <label class="flex-item">
      <input type="radio" value="no-impact" name="sbr-governance"> <span></span>
    </label>
    <label class="flex-item">
      <input type="radio" value="not-reviewed" name="sbr-governance"> <span></span>
    </label>
  </div>
  <div class="grid-row">
    <div class="flex-item">SIG Express</div>
    <label class="flex-item">
      <input type="radio" value="impact" name="sig-express"> <span></span>
    </label>
    <label class="flex-item">
      <input type="radio" value="no-impact" name="sig-express"> <span></span>
    </label>
    <label class="flex-item">
      <input type="radio" value="not-reviewed" name="sig-express"> <span></span>
    </label>
  </div>
  <div class="grid-row">
    <div class="flex-item">Template Edits</div>
    <label class="flex-item">
      <input type="radio" value="impact" name="template-edits"> <span></span>
    </label>
    <label class="flex-item">
      <input type="radio" value="no-impact" name="template-edits"> <span></span>
    </label>
    <label class="flex-item">
      <input type="radio" value="not-reviewed" name="template-edits"> <span></span>
    </label>
  </div>
  <div class="grid-row">
    <div class="flex-item">Templates updated for plan copy (OSCAR/WWW,VRS) – LIVE DATE</div>
    <label class="flex-item">
      <input type="radio" value="impact" name="templates-updated"> <span></span>
    </label>
    <label class="flex-item">
      <input type="radio" value="no-impact" name="templates-updated"> <span></span>
    </label>
    <label class="flex-item">
      <input type="radio" value="not-reviewed" name="templates-updated"> <span></span>
    </label>
  </div>
  <div class="grid-row">
    <div class="flex-item">Testing (BAT, Etc.)</div>
    <label class="flex-item">
      <input type="radio" value="impact" name="testing"> <span></span>
    </label>
    <label class="flex-item">
      <input type="radio" value="no-impact" name="testing"> <span></span>
    </label>
    <label class="flex-item">
      <input type="radio" value="not-reviewed" name="testing"> <span></span>
    </label>
  </div>
  <div class="grid-row">
    <div class="flex-item">Training (SSC-Team Model, SSC – Maint, QA)</div>
    <label class="flex-item">
      <input type="radio" value="impact" name="training"> <span></span>
    </label>
    <label class="flex-item">
      <input type="radio" value="no-impact" name="training"> <span></span>
    </label>
    <label class="flex-item">
      <input type="radio" value="not-reviewed" name="training"> <span></span>
    </label>
  </div>
  <div class="sig-section-comments">
    <label>Comments</label>
    <textarea rows=5></textarea>
  </div>
  <div>
    <button class="btn btn-save">Save Progress</button>
  </div>
</fieldset>


<fieldset>
  <legend>SIG Communications</legend>
  <div class="wrapper">
    <div class="grid-header">
      <div class="header-item"></div>
      <div class="header-item">
        Not Started or N/A
      </div>
      <div class="header-item">In Process</div>
      <div class="header-item">Complete</div>
    </div>
  </div>
  <div class="grid-row">
    <div class="flex-item">Monthly Install Deck</div>
    <label class="flex-item">
      <input type="radio" value="not-started" name="monthly-install-deck"> <span></span>
    </label>
    <label class="flex-item">
      <input type="radio" value="in-process" name="monthly-install-deck"> <span></span>
    </label>
    <label class="flex-item">
      <input type="radio" value="complete" name="monthly-install-deck"> <span></span>
    </label>
  </div>
  <div class="grid-row">
    <div class="flex-item">Ribbit Updates</div>
    <label class="flex-item">
      <input type="radio" value="not-started" name="ribbit-updates"> <span></span>
    </label>
    <label class="flex-item">
      <input type="radio" value="in-process" name="ribbit-updates"> <span></span>
    </label>
    <label class="flex-item">
      <input type="radio" value="complete" name="ribbit-updates"> <span></span>
    </label>
  </div>
  <div class="grid-row">
    <div class="flex-item">Team Meetings</div>
    <label class="flex-item">
      <input type="radio" value="not-started" name="team-meetings"> <span></span>
    </label>
    <label class="flex-item">
      <input type="radio" value="in-process" name="team-meetings"> <span></span>
    </label>
    <label class="flex-item">
      <input type="radio" value="complete" name="team-meetings"> <span></span>
    </label>
  </div>
  <div class="grid-row">
    <div class="flex-item">Training for India</div>
    <label class="flex-item">
      <input type="radio" value="not-started" name="training-india"> <span></span>
    </label>
    <label class="flex-item">
      <input type="radio" value="in-process" name="training-india"> <span></span>
    </label>
    <label class="flex-item">
      <input type="radio" value="complete" name="training-india"> <span></span>
    </label>
  </div>
  <div class="sig-section-comments">
    <label>Comments</label>
    <textarea rows=5></textarea>
  </div>
  <div>
    <button class="btn btn-save">Save Progress</button>
  </div>
</fieldset>

<fieldset>
  <legend>Other Considerations</legend>
  <div class="wrapper">
    <div class="grid-header">
      <div class="header-item"></div>
      <div class="header-item">
        <div>Impact</div>
      </div>
      <div class="header-item">No Impact</div>
      <div class="header-item">Not Reviewed</div>
    </div>
  </div>
  <div class="grid-row">
    <div class="flex-item">Consult with SIG SMEs</div>
    <label class="flex-item">
      <input type="radio" value="impact" name="consult-sig-sme"> <span></span>
    </label>
    <label class="flex-item">
      <input type="radio" value="no-impact" name="consult-sig-sme"> <span></span>
    </label>
    <label class="flex-item">
      <input type="radio" value="not-reviewed" name="consult-sig-sme"> <span></span>
    </label>
  </div>
  <div class="grid-row">
    <div class="flex-item">Plan Profile</div>
    <label class="flex-item">
      <input type="radio" value="impact" name="plan-profile"> <span></span>
    </label>
    <label class="flex-item">
      <input type="radio" value="no-impact" name="plan-profile"> <span></span>
    </label>
    <label class="flex-item">
      <input type="radio" value="not-reviewed" name="plan-profile"> <span></span>
    </label>
  </div>
  <div class="grid-row">
    <div class="flex-item">Offshore or US?</div>
    <label class="flex-item">
      <input type="radio" value="impact" name="offshore"> <span></span>
    </label>
    <label class="flex-item">
      <input type="radio" value="no-impact" name="offshore"> <span></span>
    </label>
    <label class="flex-item">
      <input type="radio" value="not-reviewed" name="offshore"> <span></span>
    </label>
  </div>
  <div class="grid-row">
    <div class="flex-item">Impacts &amp; Awareness for IPMs &amp; DCCs</div>
    <label class="flex-item">
      <input type="radio" value="impact" name="impacts-and-awareness"> <span></span>
    </label>
    <label class="flex-item">
      <input type="radio" value="no-impact" name="impacts-and-awareness"> <span></span>
    </label>
    <label class="flex-item">
      <input type="radio" value="not-reviewed" name="impacts-and-awareness"> <span></span>
    </label>
  </div>
  <div class="grid-row">
    <div class="flex-item">Additional Risks/Concerns</div>
    <label class="flex-item">
      <input type="radio" value="impact" name="additional-risks"> <span></span>
    </label>
    <label class="flex-item">
      <input type="radio" value="no-impact" name="additional-risks"> <span></span>
    </label>
    <label class="flex-item">
      <input type="radio" value="not-reviewed" name="additional-risks"> <span></span>
    </label>
  </div>
  <div class="sig-section-comments">
    <label>Comments</label>
    <textarea rows=5></textarea>
  </div>
  <div>
    <button class="btn btn-save">Save Progress</button>
  </div>
</fieldset>
              
            
!

CSS

              
                @import url(https://fonts.googleapis.com/css?family=Cabin:700);
@import url(https://fonts.googleapis.com/css?family=Roboto);

.wrapper {
  display:flex;
  flex-direction:column;
}
.grid-row {
  margin-bottom: 1em
}
.grid-row, .grid-header {
  display:flex;
/*   flex: 1 0 auto; */
/*   height: auto; */
}
.sig-section-comments{
  display: flex;
  margin-top:1em;
  justify-content: flex-end;
}
.sig-section-comments label{
  width:180px;
}
.sig-section-comments textarea {
  width:67%;
}
.grid-header {
  align-items: flex-end;
}
.header-item {
  width:100px;
  text-align:center;
/*   border:1px solid transparent; */
}
.header-item:nth-child(1) {
  width:180px;
}
.subtitle {
  font-size: 0.7em;
}
.flex-item:before {
  content: '';
  padding-top:26%;
}
.flex-item {
  display:flex;
/*   flex-basis:25%; */
  width:100px;
  border-bottom:1px solid #ccc;
  justify-content: center;
  align-items:center;
/*   text-align:left; */
  font-size: 1em;
  font-weight:normal;
  color:#999;
}
.flex-item:nth-child(1) {
  border:none;
  font-size:1.15em;
  color:#000;
  width:180px;
  justify-content: left;
}
/* HTML5 Boilerplate accessible hidden styles */

[type="radio"], [type="checkbox"] {
  border: 0; 
  clip: rect(0 0 0 0); 
  height: 1px; margin: -1px; 
  overflow: hidden; 
  padding: 0; 
  position: absolute; 
  width: 1px;
}

/* One radio button per line */
label {
  /*display: block;*/
  cursor: pointer;
}

/* the basic, unchecked style */
[type="radio"] + span:before,
[type="checkbox"] + span:before{
  content: '';
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: -0.25em;
  border-radius:.25em;
  border: 0.125em solid #fff;
  box-shadow: 0 0 0 0.15em #555;
  transition: 0.5s ease all;
}
[type="checkbox"] + span:before {
  margin-right: 0.75em;
}

/* the checked style using the :checked pseudo class */
[type="radio"]:checked + span:before,
[type="checkbox"]:checked + span:before{
  background: green;
  box-shadow: 0 0 0 0.25em #666;
}

/* never forget focus styling */
[type="radio"]:focus span:after {
  content: '\0020\2190';
  font-size: 1.5em;
  line-height: 1;
  vertical-align: -0.125em;
}

/* Nothing to see here. */
body {
  font-size:14px;
  margin: 3em auto;
  max-width: 40em;
  font-family: Roboto, sans;
}

fieldset {
  font-size: 1em;
  border: 2px solid #000;
  padding: 2em;
  border-radius: 0.5em;
  margin-bottom: 20px;
}

legend {
  color: #fff;
  background: #000;
  padding: 0.25em 1em;
  border-radius: 1em;
}

button {
  background-color:#507EDD;
  border:none;
  padding:10px;
  margin-top: 20px;
  color:white;
  font-size:1em;
  width:75%;
  position:relative;
  left:12.5%;
  border-radius:3px;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.36),0 2px 10px 0 rgba(0,0,0,0.12);
}
              
            
!

JS

              
                
              
            
!
999px

Console