Smashing on the CSS some more...

stroll.html

@@ -143,6 +143,7 @@
       <div id="custom-species">
       <button class="stat-button" id="button-dark-mode-options">Toggle Dark Mode</button>
         <p>Build your Character (leave blank for defaults)</p>
+        <p>Lengths in meters, areas in square meters, masses in kilograms</p>
         <form id="custom-species-form" name="custom-species-form">
           <ul class="flex-outer">
             <div class="custom-category">
@@ -365,7 +366,7 @@
                 </li>
                 <li>
                   <div class="custom-category-sub">
-                    <ul class="flex-outer">
+                    <ul class="flex-outer-sub">
                       <input class="custom-header-checkbox" type="checkbox" checked="true" id="lactationEnabled" name="lactationEnabled"/>
                       <label class="custom-header" for="lactationEnabled">Lactation</label>
                       <div class="reveal-if-active">

style.css

@@ -272,17 +272,34 @@ body.dark input[type="checkbox"]:checked+
   width: 500px;
 }
 
-.flex-outer > li > label,
-.flex-outer > div > div > li > label,
-.flex-outer li p {
-  flex: 1 0 120px;
-  max-width: 220px;
+.flex-outer label,
+.flex-outer > div > div > li > label {
+  flex: 1 0 150px;
 }
 
 .flex-outer > li > label + *,
-.flex-outer > div > div > li > label + *,
+.flex-outer label + *,
 .flex-inner {
-  flex: 1 0 220px;
+  flex: 1 0 200px;
+}
+
+.flex-outer-sub li,
+.flex-inner {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  width: 400px;
+}
+
+.flex-outer-sub label,
+.flex-outer-sub > div > div > li > label {
+  flex: 1 0 150px;
+}
+
+.flex-outer-sub > li > label + *,
+.flex-outer-sub label + *,
+.flex-inner {
+  flex: 1 0 200px;
 }
 
 body.light .has-tooltip {