JSFiddle - React, Tailwind, and code Playground

HTML

<h2>
  Tabbing navigation OK
</h2>
<div class="container">
  <div class="line" style="order: 1;"><input value="A"><span>1st div - Order: 1</span></div>
  <div class="line" style="order: 2;"><input value="B"><span>2nd div - Order: 2</span></div>
  <div class="line" style="order: 3;"><input value="C"><span>3rd div - Order: 3</span></div>
  <div class="line" style="order: 4;"><input value="D"><span>4th div - Order: 4</span></div>
</div>

<h2>
  Tabbing navigation KO
</h2>
<div class="container">
  <div class="line" style="order: 1;"><input value="A"><span>1st div - Order: 1</span></div>
  <div class="line" style="order: 4;"><input value="C"><span>2nd div - Order: 4</span></div>
  <div class="line" style="order: 3;"><input value="C"><span>3rd div - Order: 3</span></div>
  <div class="line" style="order: 2;"><input value="B"><span>4th div - Order: 2</span></div>
</div>

CSS

.container {
  display: flex;
  flex-direction: column;
}

.line {
  padding: 5px;
  border: 1px solid gray;
  margin-bottom: 5px;
}

.line span {
  margin-left: 7px;
}