diff --git a/common/changes/office-ui-fabric-react/jdrush89-Change-Toggle-Styling-To-Use-Flexbox_2018-03-19-19-21.json b/common/changes/office-ui-fabric-react/jdrush89-Change-Toggle-Styling-To-Use-Flexbox_2018-03-19-19-21.json
new file mode 100644
index 00000000000000..9f343b9df1645f
--- /dev/null
+++ b/common/changes/office-ui-fabric-react/jdrush89-Change-Toggle-Styling-To-Use-Flexbox_2018-03-19-19-21.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Toggle: Updating to use flexbox positioning",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "jdrush89@gmail.com"
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Toggle/Toggle.classNames.ts b/packages/office-ui-fabric-react/src/components/Toggle/Toggle.classNames.ts
index 5bc01a79fb4f3c..3349b472425448 100644
--- a/packages/office-ui-fabric-react/src/components/Toggle/Toggle.classNames.ts
+++ b/packages/office-ui-fabric-react/src/components/Toggle/Toggle.classNames.ts
@@ -79,9 +79,7 @@ export const getClassNames = memoizeFunction((
       getFocusStyle(theme, -3),
       {
         fontSize: '20px',
-        lineHeight: '1em',
         boxSizing: 'border-box',
-        position: 'relative',
         width: '2.2em',
         height: '1em',
         borderRadius: '1em',
@@ -91,6 +89,9 @@ export const getClassNames = memoizeFunction((
         background: pillUncheckedBackground,
         borderColor: pillBorderColor,
         cursor: 'pointer',
+        display: 'flex',
+        alignItems: 'center',
+        padding: '0 .2em'
       },
       styles.pill,
       !disabled && [
@@ -108,7 +109,8 @@ export const getClassNames = memoizeFunction((
         checked && [
           {
             background: pillCheckedBackground,
-            borderColor: 'transparent'
+            borderColor: 'transparent',
+            justifyContent: 'flex-end'
           },
           styles.pillChecked,
           {
@@ -143,7 +145,8 @@ export const getClassNames = memoizeFunction((
         checked && [
           {
             backgroundColor: pillCheckedDisabledBackground,
-            borderColor: 'transparent'
+            borderColor: 'transparent',
+            justifyContent: 'flex-end'
           },
           styles.pillCheckedDisabled
         ],
@@ -156,22 +159,18 @@ export const getClassNames = memoizeFunction((
         width: '.5em',
         height: '.5em',
         borderRadius: '.5em',
-        position: 'absolute',
-        top: '.18em',
         transition: 'all 0.1s ease',
         backgroundColor: thumbBackground,
         /* Border is added to handle high contrast mode for Firefox */
         borderColor: 'transparent',
         borderWidth: '.28em',
         borderStyle: 'solid',
-        boxSizing: 'border-box',
-        left: '.2em'
+        boxSizing: 'border-box'
       },
       styles.thumb,
       !disabled && checked && [
         {
           backgroundColor: thumbCheckedBackground,
-          left: '1.4em',
           selectors: {
             [HighContrastSelector]: {
               backgroundColor: 'Window',
@@ -185,14 +184,12 @@ export const getClassNames = memoizeFunction((
         !checked && [
           {
             backgroundColor: thumbDisabledBackground,
-            left: '.2em',
           },
           styles.thumbDisabled
         ],
         checked && [
           {
             backgroundColor: thumbCheckedDisabledBackground,
-            left: '1.4em'
           },
           styles.thumbCheckedDisabled
         ]
diff --git a/packages/office-ui-fabric-react/src/components/Toggle/__snapshots__/Toggle.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Toggle/__snapshots__/Toggle.test.tsx.snap
index f46f8708b18551..9a28d78b4182eb 100644
--- a/packages/office-ui-fabric-react/src/components/Toggle/__snapshots__/Toggle.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/Toggle/__snapshots__/Toggle.test.tsx.snap
@@ -48,6 +48,7 @@ exports[`Toggle renders toggle correctly 1`] = `
       className=
           ms-Toggle-background
           {
+            align-items: center;
             background: #ffffff;
             border-color: #666666;
             border-radius: 1em;
@@ -55,10 +56,14 @@ exports[`Toggle renders toggle correctly 1`] = `
             border-width: 1px;
             box-sizing: border-box;
             cursor: pointer;
+            display: flex;
             font-size: 20px;
             height: 1em;
-            line-height: 1em;
             outline: transparent;
+            padding-bottom: 0;
+            padding-left: .2em;
+            padding-right: .2em;
+            padding-top: 0;
             position: relative;
             transition: all 0.1s ease;
             width: 2.2em;
@@ -98,9 +103,6 @@ exports[`Toggle renders toggle correctly 1`] = `
               border-width: .28em;
               box-sizing: border-box;
               height: .5em;
-              left: .2em;
-              position: absolute;
-              top: .18em;
               transition: all 0.1s ease;
               width: .5em;
             }