Align radio invalid validation text

components/interactive-elements.html

@@ -625,7 +625,6 @@
         <p class="sg-state-example__label sg-table-label">form-invalid</p>
         <div class="sg-labeled-input-row sg-labeled-input-row--radio-invalid">
           <span class="sg-label">Label</span>
-          <span class="sg-input-validation-stack">
           <span class="sg-radio-field-row">
             <span class="sg-radio-activatable-group__choices">
               <span class="sg-radio-activatable-group__choice">
@@ -643,7 +642,6 @@
             </span>
           </span>
           <span class="sg-form-validation-text" id="radio-invalid-feedback">Bitte eine Option auswählen.</span>
-          </span>
         </div>
       </div>
 

styles/10-components-interactive-elements.css

@@ -418,7 +418,27 @@
     }
 
     #component-radio-field .sg-labeled-input-row--radio-invalid {
-      align-items: flex-start;
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr);
+      column-gap: var(--spacing-large);
+      row-gap: var(--spacing-small);
+      align-items: start;
+    }
+
+    #component-radio-field .sg-labeled-input-row--radio-invalid .sg-label {
+      grid-column: 1;
+      grid-row: 1;
+      margin-right: 0;
+    }
+
+    #component-radio-field .sg-labeled-input-row--radio-invalid .sg-radio-field-row {
+      grid-column: 2;
+      grid-row: 1;
+    }
+
+    #component-radio-field .sg-labeled-input-row--radio-invalid .sg-form-validation-text {
+      grid-column: 1 / -1;
+      grid-row: 2;
     }
 
     .sg-input-multi-line {