JSFiddle - React, Tailwind, and code Playground

by jpeter06

HTML

<div class="flexh three">
  <div class="flexh2">
    <span>  Aaaaa1:  </span>
    <input type="text">
  </div>
  <div class="flexh2">
    <span>  b1:  </span>
    <input type="text">
  </div>
  <div class="flexh2">
    <span> c1:  </span>
    <input type="text">
  </div>
  <div class="flexh2">
    <span>  d1:  </span>
    <input type="text">
  </div>

</div>

CSS

.flexh{
  display:flex;
  flex-wrap: wrap;
  gap:5px;
}

.flexh2{
  display:flex;
  gap:5px;
}

.flexh2 span{
  width:60px;
}

body .three div{
  width:200px !important;
  background:orange;
}

.three div:first-child{
  background:red;
}

.two div{
  width:200px !important;
  background:tan;
}

input{
  width:100px;
}