Make the extended reporting opt-in checkbox into a flexbox.

components/security_interstitials/core/browser/resources/interstitial_v2.css

 /* Copyright 2014 The Chromium Authors. All rights reserved.
    Use of this source code is governed by a BSD-style license that can be
    found in the LICENSE file. */
 
 a {
   color: #585858;
 }
 
 .bad-clock .icon {
   background-image: -webkit-image-set(
@@ skipping 148 matching lines @@
   display: inline;
 }
 
 #extended-reporting-opt-in {
   font-size: .875em;
   margin-top: 39px;
 }
 
 #extended-reporting-opt-in label {
   position: relative;
+  display: flex;
+  align-items: flex-start;
+}
+
+#opt-in-label {

[lgarron, 2016/12/12 22:13:37]

This is a slightly brittle fix to compensate for the fact that the checkbox is
not taking up its "actual" width.

Can you add padding to the checkbox to the same effect?

[lpz, 2016/12/12 22:30:25]

Didn't seem to work. For reference, here's the HTML: 
<div id="extended-reporting-opt-in" class="hidden">
  <label>
    <input type="checkbox" id="opt-in-checkbox">
    <span class="checkbox" id="foo"></span> *I named this foo to test
    <span id="opt-in-label"></span>
  </label>
</div>

padding-right on "opt-in-checkbox" does nothing
padding-right on "foo" makes the white checkbox outline wider
padding-left on "opt-in-label" is equivalent to margin-left horizontally but the
text shifts down slightly (which is why I hacked it back up with margin-top
here).

I'm very open to other suggestions, since this change is outside of my
expertise.

[edwardjung, 2016/12/13 12:14:56]

Remove the margins here and add a wrapper to checkboxes, then apply the flex
attributes:

<div id="extended-reporting-opt-in" class="hidden">
  <label>
    <div class="checkboxes">
       <input type="checkbox" id="opt-in-checkbox">
       <span class="checkbox"></span>
    </div>
     <span id="opt-in-label"></span>
  </label>
</div>

.checkboxes {
  flex: 0 0 24px;
}

.checkbox {
  top: 3px;
}

[lpz, 2016/12/13 15:09:49]

Awesome thanks. That solves the horizontal alignment, but the text is still
shifted down a little bit: https://screenshot.googleplex.com/Hche711yHiq

Thoughts?

+  margin-left: 1em;
+  margin-top: -5px;
 }
 
 .nav-wrapper {
   margin-top: 51px;
 }
 
 .nav-wrapper::after {
   clear: both;
   content: '';
   display: table;
@@ skipping 467 matching lines @@
     width: 100%;
   }
 }
 
 @media (max-width: 239px) and (orientation: portrait) {
   .nav-wrapper {
     padding-left: 0;
     padding-right: 0;
   }
 }