Direction

{/* Logical properties only: ms-*/me-*, ps-*/pe-*, text-start.
   Wrap in dir="rtl" and the layout flips for free. */}
<div dir="rtl">
  <nav class="flex items-center gap-1 text-xs text-text-tertiary">
    <a href="#">Type</a><span>/</span><a href="#">Weights</a>
  </nav>
  <label class="mt-3 block text-start text-xs">Family name</label>
  <input class="mt-1.5 h-9 w-full rounded-md border border-border bg-transparent px-3 text-sm" />
  <div class="mt-3 flex gap-2">
    <button class="ms-auto …">Cancel</button>
    <button class="bg-primary text-white …">Save</button>
  </div>
</div>