fix(QuizQuestion): align position and question text along baseline (#718)

Author: huyenltnguyen

src/quiz-question/quiz-question.stories.tsx

@@ -553,4 +553,52 @@ print(cel)
 	},
 };
 
+export const WithRubyText: Story = {
+	render: QuizQuestionComp,
+	args: {
+		question: (
+			<span>
+				What does{" "}
+				<ruby>
+					你好<rt>nǐ hǎo</rt>
+				</ruby>{" "}
+				mean?
+			</span>
+		),
+		answers: [
+			{ label: "Hello", value: 1 },
+			{ label: "Goodbye", value: 2 },
+			{ label: "Thank you", value: 3 },
+		],
+		position: 1,
+	},
+	parameters: {
+		docs: {
+			source: {
+				code: `const App = () => {
+  const [answer, setAnswer] = useState();
+
+  return (
+    <QuizQuestion
+      question={
+        <span>
+          What does <ruby>你好<rt>nǐ hǎo</rt></ruby> mean?
+        </span>
+      }
+      answers={[
+        { label: "Hello", value: 1 },
+        { label: "Goodbye", value: 2 },
+        { label: "Thank you", value: 3 }
+      ]}
+      onChange={(newAnswer) => setAnswer(newAnswer)}
+      selectedAnswer={answer}
+			position={1}
+    />
+  );
+}`,
+			},
+		},
+	},
+};
+
 export default story;

src/quiz-question/quiz-question.tsx

@@ -16,7 +16,7 @@ const QuestionText = ({
 	}
 
 	return (
-		<span className="text-foreground-primary flex">
+		<span className="text-foreground-primary flex items-baseline">
 			<span>{position}.</span>
 			&nbsp;
 			{question}