diff --git a/.loki/reference/chrome_iphone7_Components_ChoiceList_Choice_Children.png b/.loki/reference/chrome_iphone7_Components_ChoiceList_Choice_Children.png
new file mode 100644
index 0000000000..b78e708903
Binary files /dev/null and b/.loki/reference/chrome_iphone7_Components_ChoiceList_Choice_Children.png differ
diff --git a/.loki/reference/chrome_laptop_Components_ChoiceList_Choice_Children.png b/.loki/reference/chrome_laptop_Components_ChoiceList_Choice_Children.png
new file mode 100644
index 0000000000..1790b99931
Binary files /dev/null and b/.loki/reference/chrome_laptop_Components_ChoiceList_Choice_Children.png differ
diff --git a/packages/design-system/src/components/ChoiceList/Choice.tsx b/packages/design-system/src/components/ChoiceList/Choice.tsx
index d0c164297c..c6f70fb562 100644
--- a/packages/design-system/src/components/ChoiceList/Choice.tsx
+++ b/packages/design-system/src/components/ChoiceList/Choice.tsx
@@ -213,41 +213,41 @@ export class Choice extends React.PureComponent<
       'ds-c-choice--small': size === 'small',
     });
 
-    const choiceWrapperClasses = classNames(className, 'ds-c-choice-wrapper');
-
     // Remove props we have our own implementations for
     if (inputProps.id) delete inputProps.id;
     if (inputProps.onChange) delete inputProps.onChange;
 
     return (
       <div
-        className={choiceWrapperClasses}
+        className={className}
         aria-live={checkedChildren ? 'polite' : null}
         aria-relevant={checkedChildren ? 'additions text' : null}
         aria-atomic={checkedChildren ? 'false' : null}
       >
-        <input
-          className={inputClasses}
-          id={this.id}
-          onChange={this.handleChange}
-          disabled={disabled}
-          ref={(ref) => {
-            this.input = ref;
-            if (inputRef) {
-              inputRef(ref);
-            }
-          }}
-          {...inputProps}
-        />
-        <FormLabel
-          className={labelClassName}
-          fieldId={this.id}
-          hint={hint}
-          inversed={inversed}
-          requirementLabel={requirementLabel}
-        >
-          {label || children}
-        </FormLabel>
+        <div className="ds-c-choice-wrapper">
+          <input
+            className={inputClasses}
+            id={this.id}
+            onChange={this.handleChange}
+            disabled={disabled}
+            ref={(ref) => {
+              this.input = ref;
+              if (inputRef) {
+                inputRef(ref);
+              }
+            }}
+            {...inputProps}
+          />
+          <FormLabel
+            className={labelClassName}
+            fieldId={this.id}
+            hint={hint}
+            inversed={inversed}
+            requirementLabel={requirementLabel}
+          >
+            {label || children}
+          </FormLabel>
+        </div>
         {this.checked() ? checkedChildren : uncheckedChildren}
       </div>
     );
diff --git a/packages/design-system/src/components/ChoiceList/ChoiceList.stories.jsx b/packages/design-system/src/components/ChoiceList/ChoiceList.stories.jsx
index 16abbdac9e..87f678149a 100644
--- a/packages/design-system/src/components/ChoiceList/ChoiceList.stories.jsx
+++ b/packages/design-system/src/components/ChoiceList/ChoiceList.stories.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-
+import { Alert } from '../Alert';
 import ChoiceList from './ChoiceList';
 import Choice from './Choice';
 
@@ -23,7 +23,7 @@ export default {
       { label: 'Disabled choice 3', value: 'C', disabled: true },
     ],
   },
-  subcomponents: { Choice },
+  subcomponents: { Alert, Choice },
 };
 
 const Template = (args) => <ChoiceList {...args} />;
@@ -64,3 +64,35 @@ InverseOption.args = {
 InverseOption.parameters = {
   backgrounds: { default: process.env.STORYBOOK_DS === 'medicare' ? 'Mgov dark' : 'Hcgov dark' },
 };
+
+export const ChoiceChildren = Template.bind({});
+ChoiceChildren.args = {
+  name: 'radio_choices',
+  type: 'radio',
+  choices: [
+    {
+      label: 'Choice 1',
+      value: 'A',
+      defaultChecked: true,
+      checkedChildren: (
+        <Alert heading="You'll save more with this option">
+          Based on the household information you provided, this option will give you the maximum
+          savings. We are adding some filler text just to show what it looks like when you have a
+          long alert as the checkedChildren of a Choice component.
+        </Alert>
+      ),
+    },
+    {
+      label: 'Choice 2',
+      requirementLabel: 'Choice hint text',
+      value: 'B',
+      checkedChildren: (
+        <Alert variation="warn" heading="Are you sure?">
+          Based on the household information you provided, you can actually save more with the other
+          option. You are free to change this at any point during the application process until you
+          have signed and submitted your final application.
+        </Alert>
+      ),
+    },
+  ],
+};
diff --git a/packages/design-system/src/components/ChoiceList/__snapshots__/ChoiceList.test.tsx.snap b/packages/design-system/src/components/ChoiceList/__snapshots__/ChoiceList.test.tsx.snap
index e6aa22acf0..b5fc4f4043 100644
--- a/packages/design-system/src/components/ChoiceList/__snapshots__/ChoiceList.test.tsx.snap
+++ b/packages/design-system/src/components/ChoiceList/__snapshots__/ChoiceList.test.tsx.snap
@@ -15,47 +15,51 @@ exports[`ChoiceList Radio buttons and Checkboxes is a radio button group 1`] = `
         Foo
       </span>
     </legend>
-    <div
-      class="ds-c-choice-wrapper"
-    >
-      <input
-        class="ds-c-choice"
-        id="radio_spec-field_2"
-        name="spec-field"
-        type="radio"
-        value="1"
-      />
-      <label
-        class="ds-c-label"
-        for="radio_spec-field_2"
+    <div>
+      <div
+        class="ds-c-choice-wrapper"
       >
-        <span
-          class=""
+        <input
+          class="ds-c-choice"
+          id="radio_spec-field_2"
+          name="spec-field"
+          type="radio"
+          value="1"
+        />
+        <label
+          class="ds-c-label"
+          for="radio_spec-field_2"
         >
-          Choice 1
-        </span>
-      </label>
+          <span
+            class=""
+          >
+            Choice 1
+          </span>
+        </label>
+      </div>
     </div>
-    <div
-      class="ds-c-choice-wrapper"
-    >
-      <input
-        class="ds-c-choice"
-        id="radio_spec-field_3"
-        name="spec-field"
-        type="radio"
-        value="2"
-      />
-      <label
-        class="ds-c-label"
-        for="radio_spec-field_3"
+    <div>
+      <div
+        class="ds-c-choice-wrapper"
       >
-        <span
-          class=""
+        <input
+          class="ds-c-choice"
+          id="radio_spec-field_3"
+          name="spec-field"
+          type="radio"
+          value="2"
+        />
+        <label
+          class="ds-c-label"
+          for="radio_spec-field_3"
         >
-          Choice 2
-        </span>
-      </label>
+          <span
+            class=""
+          >
+            Choice 2
+          </span>
+        </label>
+      </div>
     </div>
   </fieldset>
 </DocumentFragment>
diff --git a/packages/design-system/src/components/MonthPicker/__snapshots__/MonthPicker.test.jsx.snap b/packages/design-system/src/components/MonthPicker/__snapshots__/MonthPicker.test.jsx.snap
index 9ac499c913..f4a18b4376 100644
--- a/packages/design-system/src/components/MonthPicker/__snapshots__/MonthPicker.test.jsx.snap
+++ b/packages/design-system/src/components/MonthPicker/__snapshots__/MonthPicker.test.jsx.snap
@@ -45,29 +45,33 @@ exports[`MonthPicker renders a snapshot 1`] = `
           aria-atomic={null}
           aria-live={null}
           aria-relevant={null}
-          className="ds-c-month-picker__month ds-c-choice-wrapper"
+          className="ds-c-month-picker__month"
         >
-          <input
-            aria-label="January"
-            checked={false}
-            className="ds-c-choice"
-            disabled={false}
-            id="checkbox_months_2"
-            name="months"
-            onChange={[Function]}
-            type="checkbox"
-            value={1}
-          />
-          <label
-            className="ds-c-label"
-            htmlFor="checkbox_months_2"
+          <div
+            className="ds-c-choice-wrapper"
           >
-            <span
-              className=""
+            <input
+              aria-label="January"
+              checked={false}
+              className="ds-c-choice"
+              disabled={false}
+              id="checkbox_months_2"
+              name="months"
+              onChange={[Function]}
+              type="checkbox"
+              value={1}
+            />
+            <label
+              className="ds-c-label"
+              htmlFor="checkbox_months_2"
             >
-              Jan
-            </span>
-          </label>
+              <span
+                className=""
+              >
+                Jan
+              </span>
+            </label>
+          </div>
         </div>
       </li>
       <li>
@@ -75,29 +79,33 @@ exports[`MonthPicker renders a snapshot 1`] = `
           aria-atomic={null}
           aria-live={null}
           aria-relevant={null}
-          className="ds-c-month-picker__month ds-c-choice-wrapper"
+          className="ds-c-month-picker__month"
         >
-          <input
-            aria-label="February"
-            checked={false}
-            className="ds-c-choice"
-            disabled={false}
-            id="checkbox_months_3"
-            name="months"
-            onChange={[Function]}
-            type="checkbox"
-            value={2}
-          />
-          <label
-            className="ds-c-label"
-            htmlFor="checkbox_months_3"
+          <div
+            className="ds-c-choice-wrapper"
           >
-            <span
-              className=""
+            <input
+              aria-label="February"
+              checked={false}
+              className="ds-c-choice"
+              disabled={false}
+              id="checkbox_months_3"
+              name="months"
+              onChange={[Function]}
+              type="checkbox"
+              value={2}
+            />
+            <label
+              className="ds-c-label"
+              htmlFor="checkbox_months_3"
             >
-              Feb
-            </span>
-          </label>
+              <span
+                className=""
+              >
+                Feb
+              </span>
+            </label>
+          </div>
         </div>
       </li>
       <li>
@@ -105,29 +113,33 @@ exports[`MonthPicker renders a snapshot 1`] = `
           aria-atomic={null}
           aria-live={null}
           aria-relevant={null}
-          className="ds-c-month-picker__month ds-c-choice-wrapper"
+          className="ds-c-month-picker__month"
         >
-          <input
-            aria-label="March"
-            checked={false}
-            className="ds-c-choice"
-            disabled={false}
-            id="checkbox_months_4"
-            name="months"
-            onChange={[Function]}
-            type="checkbox"
-            value={3}
-          />
-          <label
-            className="ds-c-label"
-            htmlFor="checkbox_months_4"
+          <div
+            className="ds-c-choice-wrapper"
           >
-            <span
-              className=""
+            <input
+              aria-label="March"
+              checked={false}
+              className="ds-c-choice"
+              disabled={false}
+              id="checkbox_months_4"
+              name="months"
+              onChange={[Function]}
+              type="checkbox"
+              value={3}
+            />
+            <label
+              className="ds-c-label"
+              htmlFor="checkbox_months_4"
             >
-              Mar
-            </span>
-          </label>
+              <span
+                className=""
+              >
+                Mar
+              </span>
+            </label>
+          </div>
         </div>
       </li>
       <li>
@@ -135,29 +147,33 @@ exports[`MonthPicker renders a snapshot 1`] = `
           aria-atomic={null}
           aria-live={null}
           aria-relevant={null}
-          className="ds-c-month-picker__month ds-c-choice-wrapper"
+          className="ds-c-month-picker__month"
         >
-          <input
-            aria-label="April"
-            checked={false}
-            className="ds-c-choice"
-            disabled={false}
-            id="checkbox_months_5"
-            name="months"
-            onChange={[Function]}
-            type="checkbox"
-            value={4}
-          />
-          <label
-            className="ds-c-label"
-            htmlFor="checkbox_months_5"
+          <div
+            className="ds-c-choice-wrapper"
           >
-            <span
-              className=""
+            <input
+              aria-label="April"
+              checked={false}
+              className="ds-c-choice"
+              disabled={false}
+              id="checkbox_months_5"
+              name="months"
+              onChange={[Function]}
+              type="checkbox"
+              value={4}
+            />
+            <label
+              className="ds-c-label"
+              htmlFor="checkbox_months_5"
             >
-              Apr
-            </span>
-          </label>
+              <span
+                className=""
+              >
+                Apr
+              </span>
+            </label>
+          </div>
         </div>
       </li>
       <li>
@@ -165,29 +181,33 @@ exports[`MonthPicker renders a snapshot 1`] = `
           aria-atomic={null}
           aria-live={null}
           aria-relevant={null}
-          className="ds-c-month-picker__month ds-c-choice-wrapper"
+          className="ds-c-month-picker__month"
         >
-          <input
-            aria-label="May"
-            checked={false}
-            className="ds-c-choice"
-            disabled={false}
-            id="checkbox_months_6"
-            name="months"
-            onChange={[Function]}
-            type="checkbox"
-            value={5}
-          />
-          <label
-            className="ds-c-label"
-            htmlFor="checkbox_months_6"
+          <div
+            className="ds-c-choice-wrapper"
           >
-            <span
-              className=""
+            <input
+              aria-label="May"
+              checked={false}
+              className="ds-c-choice"
+              disabled={false}
+              id="checkbox_months_6"
+              name="months"
+              onChange={[Function]}
+              type="checkbox"
+              value={5}
+            />
+            <label
+              className="ds-c-label"
+              htmlFor="checkbox_months_6"
             >
-              May
-            </span>
-          </label>
+              <span
+                className=""
+              >
+                May
+              </span>
+            </label>
+          </div>
         </div>
       </li>
       <li>
@@ -195,29 +215,33 @@ exports[`MonthPicker renders a snapshot 1`] = `
           aria-atomic={null}
           aria-live={null}
           aria-relevant={null}
-          className="ds-c-month-picker__month ds-c-choice-wrapper"
+          className="ds-c-month-picker__month"
         >
-          <input
-            aria-label="June"
-            checked={false}
-            className="ds-c-choice"
-            disabled={false}
-            id="checkbox_months_7"
-            name="months"
-            onChange={[Function]}
-            type="checkbox"
-            value={6}
-          />
-          <label
-            className="ds-c-label"
-            htmlFor="checkbox_months_7"
+          <div
+            className="ds-c-choice-wrapper"
           >
-            <span
-              className=""
+            <input
+              aria-label="June"
+              checked={false}
+              className="ds-c-choice"
+              disabled={false}
+              id="checkbox_months_7"
+              name="months"
+              onChange={[Function]}
+              type="checkbox"
+              value={6}
+            />
+            <label
+              className="ds-c-label"
+              htmlFor="checkbox_months_7"
             >
-              Jun
-            </span>
-          </label>
+              <span
+                className=""
+              >
+                Jun
+              </span>
+            </label>
+          </div>
         </div>
       </li>
       <li>
@@ -225,29 +249,33 @@ exports[`MonthPicker renders a snapshot 1`] = `
           aria-atomic={null}
           aria-live={null}
           aria-relevant={null}
-          className="ds-c-month-picker__month ds-c-choice-wrapper"
+          className="ds-c-month-picker__month"
         >
-          <input
-            aria-label="July"
-            checked={false}
-            className="ds-c-choice"
-            disabled={false}
-            id="checkbox_months_8"
-            name="months"
-            onChange={[Function]}
-            type="checkbox"
-            value={7}
-          />
-          <label
-            className="ds-c-label"
-            htmlFor="checkbox_months_8"
+          <div
+            className="ds-c-choice-wrapper"
           >
-            <span
-              className=""
+            <input
+              aria-label="July"
+              checked={false}
+              className="ds-c-choice"
+              disabled={false}
+              id="checkbox_months_8"
+              name="months"
+              onChange={[Function]}
+              type="checkbox"
+              value={7}
+            />
+            <label
+              className="ds-c-label"
+              htmlFor="checkbox_months_8"
             >
-              Jul
-            </span>
-          </label>
+              <span
+                className=""
+              >
+                Jul
+              </span>
+            </label>
+          </div>
         </div>
       </li>
       <li>
@@ -255,29 +283,33 @@ exports[`MonthPicker renders a snapshot 1`] = `
           aria-atomic={null}
           aria-live={null}
           aria-relevant={null}
-          className="ds-c-month-picker__month ds-c-choice-wrapper"
+          className="ds-c-month-picker__month"
         >
-          <input
-            aria-label="August"
-            checked={false}
-            className="ds-c-choice"
-            disabled={false}
-            id="checkbox_months_9"
-            name="months"
-            onChange={[Function]}
-            type="checkbox"
-            value={8}
-          />
-          <label
-            className="ds-c-label"
-            htmlFor="checkbox_months_9"
+          <div
+            className="ds-c-choice-wrapper"
           >
-            <span
-              className=""
+            <input
+              aria-label="August"
+              checked={false}
+              className="ds-c-choice"
+              disabled={false}
+              id="checkbox_months_9"
+              name="months"
+              onChange={[Function]}
+              type="checkbox"
+              value={8}
+            />
+            <label
+              className="ds-c-label"
+              htmlFor="checkbox_months_9"
             >
-              Aug
-            </span>
-          </label>
+              <span
+                className=""
+              >
+                Aug
+              </span>
+            </label>
+          </div>
         </div>
       </li>
       <li>
@@ -285,29 +317,33 @@ exports[`MonthPicker renders a snapshot 1`] = `
           aria-atomic={null}
           aria-live={null}
           aria-relevant={null}
-          className="ds-c-month-picker__month ds-c-choice-wrapper"
+          className="ds-c-month-picker__month"
         >
-          <input
-            aria-label="September"
-            checked={false}
-            className="ds-c-choice"
-            disabled={false}
-            id="checkbox_months_10"
-            name="months"
-            onChange={[Function]}
-            type="checkbox"
-            value={9}
-          />
-          <label
-            className="ds-c-label"
-            htmlFor="checkbox_months_10"
+          <div
+            className="ds-c-choice-wrapper"
           >
-            <span
-              className=""
+            <input
+              aria-label="September"
+              checked={false}
+              className="ds-c-choice"
+              disabled={false}
+              id="checkbox_months_10"
+              name="months"
+              onChange={[Function]}
+              type="checkbox"
+              value={9}
+            />
+            <label
+              className="ds-c-label"
+              htmlFor="checkbox_months_10"
             >
-              Sep
-            </span>
-          </label>
+              <span
+                className=""
+              >
+                Sep
+              </span>
+            </label>
+          </div>
         </div>
       </li>
       <li>
@@ -315,29 +351,33 @@ exports[`MonthPicker renders a snapshot 1`] = `
           aria-atomic={null}
           aria-live={null}
           aria-relevant={null}
-          className="ds-c-month-picker__month ds-c-choice-wrapper"
+          className="ds-c-month-picker__month"
         >
-          <input
-            aria-label="October"
-            checked={false}
-            className="ds-c-choice"
-            disabled={false}
-            id="checkbox_months_11"
-            name="months"
-            onChange={[Function]}
-            type="checkbox"
-            value={10}
-          />
-          <label
-            className="ds-c-label"
-            htmlFor="checkbox_months_11"
+          <div
+            className="ds-c-choice-wrapper"
           >
-            <span
-              className=""
+            <input
+              aria-label="October"
+              checked={false}
+              className="ds-c-choice"
+              disabled={false}
+              id="checkbox_months_11"
+              name="months"
+              onChange={[Function]}
+              type="checkbox"
+              value={10}
+            />
+            <label
+              className="ds-c-label"
+              htmlFor="checkbox_months_11"
             >
-              Oct
-            </span>
-          </label>
+              <span
+                className=""
+              >
+                Oct
+              </span>
+            </label>
+          </div>
         </div>
       </li>
       <li>
@@ -345,29 +385,33 @@ exports[`MonthPicker renders a snapshot 1`] = `
           aria-atomic={null}
           aria-live={null}
           aria-relevant={null}
-          className="ds-c-month-picker__month ds-c-choice-wrapper"
+          className="ds-c-month-picker__month"
         >
-          <input
-            aria-label="November"
-            checked={false}
-            className="ds-c-choice"
-            disabled={false}
-            id="checkbox_months_12"
-            name="months"
-            onChange={[Function]}
-            type="checkbox"
-            value={11}
-          />
-          <label
-            className="ds-c-label"
-            htmlFor="checkbox_months_12"
+          <div
+            className="ds-c-choice-wrapper"
           >
-            <span
-              className=""
+            <input
+              aria-label="November"
+              checked={false}
+              className="ds-c-choice"
+              disabled={false}
+              id="checkbox_months_12"
+              name="months"
+              onChange={[Function]}
+              type="checkbox"
+              value={11}
+            />
+            <label
+              className="ds-c-label"
+              htmlFor="checkbox_months_12"
             >
-              Nov
-            </span>
-          </label>
+              <span
+                className=""
+              >
+                Nov
+              </span>
+            </label>
+          </div>
         </div>
       </li>
       <li>
@@ -375,29 +419,33 @@ exports[`MonthPicker renders a snapshot 1`] = `
           aria-atomic={null}
           aria-live={null}
           aria-relevant={null}
-          className="ds-c-month-picker__month ds-c-choice-wrapper"
+          className="ds-c-month-picker__month"
         >
-          <input
-            aria-label="December"
-            checked={false}
-            className="ds-c-choice"
-            disabled={false}
-            id="checkbox_months_13"
-            name="months"
-            onChange={[Function]}
-            type="checkbox"
-            value={12}
-          />
-          <label
-            className="ds-c-label"
-            htmlFor="checkbox_months_13"
+          <div
+            className="ds-c-choice-wrapper"
           >
-            <span
-              className=""
+            <input
+              aria-label="December"
+              checked={false}
+              className="ds-c-choice"
+              disabled={false}
+              id="checkbox_months_13"
+              name="months"
+              onChange={[Function]}
+              type="checkbox"
+              value={12}
+            />
+            <label
+              className="ds-c-label"
+              htmlFor="checkbox_months_13"
             >
-              Dec
-            </span>
-          </label>
+              <span
+                className=""
+              >
+                Dec
+              </span>
+            </label>
+          </div>
         </div>
       </li>
     </ol>
diff --git a/packages/design-system/src/styles/components/_Choice.scss b/packages/design-system/src/styles/components/_Choice.scss
index a27ae37649..b0d9564c07 100644
--- a/packages/design-system/src/styles/components/_Choice.scss
+++ b/packages/design-system/src/styles/components/_Choice.scss
@@ -14,7 +14,8 @@ $ds-c-inset-border-width: $spacer-half;
   flex-wrap: wrap;
   gap: 0.5rem;
   margin: 0.5rem 0;
-  max-width: $input-max-width;
+  // max-width: $input-max-width;
+  max-width: $measure-base;
 }
 
 // Styles for label