diff --git a/lms/static/js/demographics_collection/DemographicsCollectionModal.jsx b/lms/static/js/demographics_collection/DemographicsCollectionModal.jsx
index 22b5c5230a..ad86afac49 100644
--- a/lms/static/js/demographics_collection/DemographicsCollectionModal.jsx
+++ b/lms/static/js/demographics_collection/DemographicsCollectionModal.jsx
@@ -326,21 +326,23 @@ class DemographicsCollectionModal extends React.Component {
                     }}
                   />
                   {/* Family Income */}
-                  <label htmlFor={FIELD_NAMES.INCOME}>
-                    {gettext("What was the total combined income, during the last 12 months, of all members of your family? ")}
-                  </label>
-                  <select
-                    onChange={this.handleSelectChange}
-                    className="form-control"
-                    name={FIELD_NAMES.INCOME} id={FIELD_NAMES.INCOME}
-                    value={wizardConsumer[FIELD_NAMES.INCOME]}
-                    disabled={this.state.fieldError}
-                  >
-                    <option value="default">{gettext("Select income")}</option>
-                    {
-                      this.loadOptions(FIELD_NAMES.INCOME)
-                    }
-                  </select>
+                  <div className="d-flex flex-column pb-3">
+                    <label htmlFor={FIELD_NAMES.INCOME}>
+                      {gettext("What was the total combined income, during the last 12 months, of all members of your family? ")}
+                    </label>
+                    <select
+                      onChange={this.handleSelectChange}
+                      className="form-control"
+                      name={FIELD_NAMES.INCOME} id={FIELD_NAMES.INCOME}
+                      value={wizardConsumer[FIELD_NAMES.INCOME]}
+                      disabled={this.state.fieldError}
+                    >
+                      <option value="default">{gettext("Select income")}</option>
+                      {
+                        this.loadOptions(FIELD_NAMES.INCOME)
+                      }
+                    </select>
+                  </div>
                 </div>
               }
             </Wizard.Page>
@@ -348,22 +350,24 @@ class DemographicsCollectionModal extends React.Component {
               {({ wizardConsumer }) =>
                 <div className="demographics-form-container" data-hj-suppress>
                   {/* Military History */}
-                  <label htmlFor={FIELD_NAMES.MILITARY}>
-                    {gettext("Have you ever served on active duty in the U.S. Armed Forces, Reserves, or National Guard?")}
-                  </label>
-                  <select
-                    className="form-control"
-                    onChange={this.handleSelectChange}
-                    name={FIELD_NAMES.MILITARY}
-                    id={FIELD_NAMES.MILITARY}
-                    value={wizardConsumer[FIELD_NAMES.MILITARY]}
-                    disabled={this.state.fieldError}
-                  >
-                    <option value="default">{gettext("Select military status")}</option>
-                    {
-                      this.loadOptions(FIELD_NAMES.MILITARY)
-                    }
-                  </select>
+                  <div className="d-flex flex-column pb-3">
+                    <label htmlFor={FIELD_NAMES.MILITARY}>
+                      {gettext("Have you ever served on active duty in the U.S. Armed Forces, Reserves, or National Guard?")}
+                    </label>
+                    <select
+                      className="form-control"
+                      onChange={this.handleSelectChange}
+                      name={FIELD_NAMES.MILITARY}
+                      id={FIELD_NAMES.MILITARY}
+                      value={wizardConsumer[FIELD_NAMES.MILITARY]}
+                      disabled={this.state.fieldError}
+                    >
+                      <option value="default">{gettext("Select military status")}</option>
+                      {
+                        this.loadOptions(FIELD_NAMES.MILITARY)
+                      }
+                    </select>
+                  </div>
                 </div>
               }
             </Wizard.Page>
@@ -371,39 +375,43 @@ class DemographicsCollectionModal extends React.Component {
               {({ wizardConsumer }) =>
                 <div className="demographics-form-container" data-hj-suppress>
                   {/* Learner Education Level */}
-                  <label htmlFor={FIELD_NAMES.EDUCATION_LEVEL}>
-                    {gettext("What is the highest level of education that you have achieved so far?")}
-                  </label>
-                  <select
-                    className="form-control"
-                    onChange={this.handleSelectChange}
-                    name={FIELD_NAMES.EDUCATION_LEVEL}
-                    id={FIELD_NAMES.EDUCATION_LEVEL}
-                    value={wizardConsumer[FIELD_NAMES.EDUCATION_LEVEL]}
-                    disabled={this.state.fieldError}
-                  >
-                    <option value="default">{gettext("Select level of education")}</option>
-                    {
-                      this.loadOptions(FIELD_NAMES.EDUCATION_LEVEL)
-                    }
-                  </select>
+                  <div className="d-flex flex-column pb-3">
+                    <label htmlFor={FIELD_NAMES.EDUCATION_LEVEL}>
+                      {gettext("What is the highest level of education that you have achieved so far?")}
+                    </label>
+                    <select
+                      className="form-control"
+                      onChange={this.handleSelectChange}
+                      name={FIELD_NAMES.EDUCATION_LEVEL}
+                      id={FIELD_NAMES.EDUCATION_LEVEL}
+                      value={wizardConsumer[FIELD_NAMES.EDUCATION_LEVEL]}
+                      disabled={this.state.fieldError}
+                    >
+                      <option value="default">{gettext("Select level of education")}</option>
+                      {
+                        this.loadOptions(FIELD_NAMES.EDUCATION_LEVEL)
+                      }
+                    </select>
+                  </div>
                   {/* Parent/Guardian Education Level */}
-                  <label htmlFor={FIELD_NAMES.PARENT_EDUCATION}>
-                    {gettext("What is the highest level of education that any of your parents or guardians have achieved?")}
-                  </label>
-                  <select
-                    className="form-control"
-                    onChange={this.handleSelectChange}
-                    name={FIELD_NAMES.PARENT_EDUCATION}
-                    id={FIELD_NAMES.PARENT_EDUCATION}
-                    value={wizardConsumer[FIELD_NAMES.PARENT_EDUCATION]}
-                    disabled={this.state.fieldError}
-                  >
-                    <option value="default">{gettext("Select guardian education")}</option>
-                    {
-                      this.loadOptions(FIELD_NAMES.PARENT_EDUCATION)
-                    }
-                  </select>
+                  <div className="d-flex flex-column pb-3">
+                    <label htmlFor={FIELD_NAMES.PARENT_EDUCATION}>
+                      {gettext("What is the highest level of education that any of your parents or guardians have achieved?")}
+                    </label>
+                    <select
+                      className="form-control pb-3"
+                      onChange={this.handleSelectChange}
+                      name={FIELD_NAMES.PARENT_EDUCATION}
+                      id={FIELD_NAMES.PARENT_EDUCATION}
+                      value={wizardConsumer[FIELD_NAMES.PARENT_EDUCATION]}
+                      disabled={this.state.fieldError}
+                    >
+                      <option value="default">{gettext("Select guardian education")}</option>
+                      {
+                        this.loadOptions(FIELD_NAMES.PARENT_EDUCATION)
+                      }
+                    </select>
+                  </div>
                 </div>
               }
             </Wizard.Page>
@@ -431,39 +439,43 @@ class DemographicsCollectionModal extends React.Component {
                     disabled={this.state.fieldError}
                   />
                   {/* Current Work Industry */}
-                  <label htmlFor={FIELD_NAMES.CURRENT_WORK}>
-                    {gettext("What industry do you currently work in?")}
-                  </label>
-                  <select
-                    className="form-control"
-                    onChange={this.handleSelectChange}
-                    name={FIELD_NAMES.CURRENT_WORK}
-                    id={FIELD_NAMES.CURRENT_WORK}
-                    value={wizardConsumer[FIELD_NAMES.CURRENT_WORK]}
-                    disabled={this.state.fieldError}
-                  >
-                    <option value="default">{gettext("Select current industry")}</option>
-                    {
-                      this.loadOptions(FIELD_NAMES.CURRENT_WORK)
-                    }
-                  </select>
+                  <div className="d-flex flex-column pb-3">
+                    <label htmlFor={FIELD_NAMES.CURRENT_WORK}>
+                      {gettext("What industry do you currently work in?")}
+                    </label>
+                    <select
+                      className="form-control pb-3"
+                      onChange={this.handleSelectChange}
+                      name={FIELD_NAMES.CURRENT_WORK}
+                      id={FIELD_NAMES.CURRENT_WORK}
+                      value={wizardConsumer[FIELD_NAMES.CURRENT_WORK]}
+                      disabled={this.state.fieldError}
+                    >
+                      <option value="default">{gettext("Select current industry")}</option>
+                      {
+                        this.loadOptions(FIELD_NAMES.CURRENT_WORK)
+                      }
+                    </select>
+                  </div>
                   {/* Future Work Industry */}
-                  <label htmlFor={FIELD_NAMES.FUTURE_WORK}>
-                    {gettext("What industry do you want to work in?")}
-                  </label>
-                  <select
-                    className="form-control"
-                    onChange={this.handleSelectChange}
-                    name={FIELD_NAMES.FUTURE_WORK}
-                    id={FIELD_NAMES.FUTURE_WORK}
-                    value={wizardConsumer[FIELD_NAMES.FUTURE_WORK]}
-                    disabled={this.state.fieldError}
-                  >
-                    <option value="default">{gettext("Select prospective industry")}</option>
-                    {
-                      this.loadOptions(FIELD_NAMES.FUTURE_WORK)
-                    }
-                  </select>
+                  <div className="d-flex flex-column pb-3">
+                    <label htmlFor={FIELD_NAMES.FUTURE_WORK}>
+                      {gettext("What industry do you want to work in?")}
+                    </label>
+                    <select
+                      className="form-control pb-3"
+                      onChange={this.handleSelectChange}
+                      name={FIELD_NAMES.FUTURE_WORK}
+                      id={FIELD_NAMES.FUTURE_WORK}
+                      value={wizardConsumer[FIELD_NAMES.FUTURE_WORK]}
+                      disabled={this.state.fieldError}
+                    >
+                      <option value="default">{gettext("Select prospective industry")}</option>
+                      {
+                        this.loadOptions(FIELD_NAMES.FUTURE_WORK)
+                      }
+                    </select>
+                  </div>
                 </div>
               }
             </Wizard.Page>
diff --git a/lms/static/js/demographics_collection/MultiselectDropdown.jsx b/lms/static/js/demographics_collection/MultiselectDropdown.jsx
index 9492f84445..62cbbacba1 100644
--- a/lms/static/js/demographics_collection/MultiselectDropdown.jsx
+++ b/lms/static/js/demographics_collection/MultiselectDropdown.jsx
@@ -109,7 +109,7 @@ class MultiselectDropdown extends React.Component {
         <div key={index} id={`${option.value}-option-container`} className="option-container">
           <label className="option-label">
             <input id={`${option.value}-option-checkbox`} className="option-checkbox" type="checkbox" value={option.value} checked={checked} onChange={this.handleOptionClick} />
-            {option.display_name}
+            <span className="pl-2">{option.display_name}</span>
           </label>
         </div>
       )
@@ -126,7 +126,7 @@ class MultiselectDropdown extends React.Component {
   render() {
     return (
       <div
-        className="multiselect-dropdown"
+        className="multiselect-dropdown pb-3"
         tabIndex={-1}
         onBlur={e => {
           // We need to make sure we only close and save the dropdown when
diff --git a/lms/static/js/demographics_collection/SelectWithInput.jsx b/lms/static/js/demographics_collection/SelectWithInput.jsx
index f5980da86c..fae4088653 100644
--- a/lms/static/js/demographics_collection/SelectWithInput.jsx
+++ b/lms/static/js/demographics_collection/SelectWithInput.jsx
@@ -18,7 +18,7 @@ export const SelectWithInput = (props) => {
     disabled,
   } = props;
   return (
-    <div className="d-flex flex-column">
+    <div className="d-flex flex-column pb-3">
       <label htmlFor={selectName}>{labelText}</label>
       <select
         className="form-control"
@@ -46,4 +46,4 @@ export const SelectWithInput = (props) => {
       }
     </div>
   )
-}
\ No newline at end of file
+}