diff --git a/resources/views/pdf-designs/hipster.html b/resources/views/pdf-designs/hipster.html
index cd1d498ceffa..84f6c951ec78 100644
--- a/resources/views/pdf-designs/hipster.html
+++ b/resources/views/pdf-designs/hipster.html
@@ -167,7 +167,7 @@
     }
 
     #table-totals>.totals-table-right-side>*> :nth-child(1) {
-        text-align: left;
+        text-align: "$dir_text_align";
         margin-top: .75rem;
     }
 
@@ -213,6 +213,16 @@
         margin-bottom: 0;
     }
 
+    .entity-details-wrapper > * {
+        direction: $dir;
+    }
+
+    .entity-details-wrapper {
+        display: flex;
+        flex-wrap: wrap;
+        direction: $dir;
+    }
+
     /** Useful snippets, uncomment to enable. **/
     
     /** Hide company logo **/
@@ -271,30 +281,31 @@
 
     <h1 class="entity-label">$entity_label</h1>
     <div class="entity-details-wrapper">
-            <span>
-                <span
-                    class="entity-property-label"
-                    data-element="entity-details-wrapper-invoice-number-label"
-                >$entity_number_label:</span
-                >
+            <div>
+                <span class="entity-property-label" data-element="entity-details-wrapper-invoice-number-label">
+                    $entity_number_label:
+                </span>
                 <span class="entity-property-value">$entity_number</span>
-            </span>
-        <span>
+            </div>
+            
+            <div>
                 <span class="entity-property-label">$date_label:</span>
                 <span class="entity-property-value">$date</span>
-            </span>
-        <span>
+            </div>
+    
+            <div>
                 <span class="entity-property-label">$payment_due_label:</span>
                 <span class="entity-property-value">$payment_due</span>
-            </span>
-        <span>
+            </div>
+    
+            <div>
                 <span class="entity-property-label">$amount_due_label:</span>
                 <span
                     class="entity-property-value"
                     data-element="entity-details-wrapper-amount-due"
                 >$amount_due</span
                 >
-            </span>
+            </div>
     </div>
 
     <table id="product-table" cellspacing="0"></table>