JSFiddle - React, Tailwind, and code Playground

by Andrew Holloway

HTML

<div>
  <div>
    Using Tab Index
  </div>
  <input type="text" tabindex="0" value="a">
  <input type="text" tabindex="1" value="b">
  <input type="text" tabindex="2" value="c">
</div>
<hr/>
<div class="set">
  <div>
    Using Flex (direction "row")
  </div>
  <input type="text" value="a">
  <input type="text" value="b">
  <input type="text" value="c">
</div>
<hr/>
<div class="set-2">
  <div>
    Using Flex (direction "row-reverse")
  </div>
  <input type="text" value="a">
  <input type="text" value="b">
  <input type="text" value="c">
</div>

CSS

.set {
  display: flex;
  flex-direction: row;
}

.set-2 {
  display: flex;
  flex-direction: row-reverse;
}