JSFiddle - React, Tailwind, and code Playground

by Diego Cardoso

HTML

<label>set/remove dir='RTL'<input type="checkbox" id="toggle-id"></label>

<p>dir=<strong id="dir-value"></strong></p>

<div style="display:flex;">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>

JavaScript

const toggleCheckbox = document.getElementById('toggle-id')
const dirValue = document.getElementById('dir-value')

function printValue(value) {
	dirValue.textContent = value;
}

printValue(document.documentElement.getAttribute('dir'))

toggleCheckbox.addEventListener('change', () => {
 if (toggleCheckbox.checked) {
 	document.documentElement.setAttribute('dir', 'rtl')
 } else {
 	document.documentElement.removeAttribute('dir')
 }
 printValue(document.documentElement.getAttribute('dir'))

})