Add new line in settings label (#7451)

Author: toger5

res/css/views/elements/_SettingsFlag.scss

@@ -17,7 +17,7 @@ limitations under the License.
 .mx_SettingsFlag {
     display: flex;
     flex-direction: row;
-    align-items: center;
+    align-items: flex-start;
     justify-content: space-between;
     margin-bottom: 4px;
 
@@ -33,6 +33,7 @@ limitations under the License.
     font-size: $font-14px;
     color: $primary-content;
     padding-right: 10px;
+    padding-top: 4px;
 }
 
 .mx_SettingsFlag_microcopy {

src/components/views/elements/SettingsFlag.tsx

@@ -96,9 +96,9 @@ export default class SettingsFlag extends React.Component<IProps, IState> {
                 <div className="mx_SettingsFlag">
                     <label className="mx_SettingsFlag_label">
                         <span className="mx_SettingsFlag_labelText">{ label }</span>
-                        { description && <span className="mx_SettingsFlag_microcopy">
+                        { description && <div className="mx_SettingsFlag_microcopy">
                             { description }
-                        </span> }
+                        </div> }
                     </label>
                     <ToggleSwitch
                         checked={this.state.value}