Re-order components in CreateGroupForm.txt

The convention in our .tsx files is to put the main/exported component
at the bottom and internal components or other helpers above.

h/static/scripts/group-forms/components/CreateGroupForm.tsx

@@ -2,6 +2,36 @@ import { useId } from 'preact/hooks';
 
 import { Button, Input, Textarea } from '@hypothesis/frontend-shared';
 
+function Star() {
+  return <span className="text-brand">*</span>;
+}
+
+function CharacterCounter({ value, limit }: { value: number; limit: number }) {
+  return (
+    <div className="flex">
+      <div className="grow" />
+      {value}/{limit}
+    </div>
+  );
+}
+
+function Label({
+  htmlFor,
+  text,
+  required,
+}: {
+  htmlFor: string;
+  text: string;
+  required?: boolean;
+}) {
+  return (
+    <label htmlFor={htmlFor}>
+      {text}
+      {required ? <Star /> : null}
+    </label>
+  );
+}
+
 export default function CreateGroupForm() {
   const nameId = useId();
   const descriptionId = useId();
@@ -41,33 +71,3 @@ export default function CreateGroupForm() {
     </div>
   );
 }
-
-function CharacterCounter({ value, limit }: { value: number; limit: number }) {
-  return (
-    <div className="flex">
-      <div className="grow" />
-      {value}/{limit}
-    </div>
-  );
-}
-
-function Label({
-  htmlFor,
-  text,
-  required,
-}: {
-  htmlFor: string;
-  text: string;
-  required?: boolean;
-}) {
-  return (
-    <label htmlFor={htmlFor}>
-      {text}
-      {required ? <Star /> : null}
-    </label>
-  );
-}
-
-function Star() {
-  return <span className="text-brand">*</span>;
-}