JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
  <div><span class="col1">abc</span><input class="col2" type="text" value="abc"></div>
  <div><input class="col1" type="text" value="abc"><span class="col2">abc</span></div>
</div>

CSS

* {
  font-family: arial;
  font-size: 40px;
  margin: 0;
  padding: 0;
}
.wrap {
  padding: 10px;
}
.col1 {
  border: 1px solid red;
}
.col2 {
  border: 1px solid green;
}