Place question number beside text

components/com_testquestions/media/egzamin.css

@@ -68,6 +68,31 @@
     font-size: inherit;
 }
 
+.com-testquestions .question-header {
+    display: flex;
+    align-items: flex-start;
+    gap: .5rem;
+}
+
+.com-testquestions .question-number {
+    flex: 0 0 auto;
+    white-space: nowrap;
+    font-weight: 700;
+}
+
+.com-testquestions .question-text {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+.com-testquestions .question-text > :first-child {
+    margin-top: 0;
+}
+
+.com-testquestions .question-text > :last-child {
+    margin-bottom: 0;
+}
+
 .com-testquestions .odp,
 .com-testquestions .odpp,
 .com-testquestions .odpu,

components/com_testquestions/tmpl/questions/default.php

@@ -36,7 +36,12 @@ use Joomla\CMS\HTML\HTMLHelper;
     <form action="<?php echo htmlspecialchars($_SERVER['REQUEST_URI'], ENT_QUOTES, 'UTF-8'); ?>" method="post">
     <?php foreach ($this->items as $number => $item) : ?>
         <article class="testquestion mb-4">
-            <div class="pyt"><h2><?php echo ($number + 1) . '. '; ?><?php echo $item->question; ?></h2></div>
+            <div class="pyt">
+                <div class="question-header">
+                    <span class="question-number"><?php echo ($number + 1) . '.'; ?></span>
+                    <div class="question-text"><?php echo $item->question; ?></div>
+                </div>
+            </div>
             <?php if ($item->image) : ?>
                 <div class="foto_pyt"><img src="<?php echo htmlspecialchars($item->image, ENT_QUOTES, 'UTF-8'); ?>" alt="" loading="lazy"></div>
             <?php endif; ?>