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

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

Index: components/security_interstitials/core/browser/resources/interstitial_v2.css
diff --git a/components/security_interstitials/core/browser/resources/interstitial_v2.css b/components/security_interstitials/core/browser/resources/interstitial_v2.css
index 014d7bd49daa4c70c28154050d36bbc3263fd27c..4509783e84c6d0011813e06a6a6287ce8733febe 100644
--- a/components/security_interstitials/core/browser/resources/interstitial_v2.css
+++ b/components/security_interstitials/core/browser/resources/interstitial_v2.css
@@ -166,6 +166,13 @@ input[type=checkbox]:focus ~ .checkbox {
 
 #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 {