JSFiddle - React, Tailwind, and code Playground

by Sampath_Madhuranga

HTML

<div class="main-wrapper">
   <div class="form-firstrow">
      <div class="form-firstrow__firstelems">
         <div class="inputs title">
            <!-- <label class="input-label">Title</label> -->
            <input class="input-text">
         </div>
         <div class="inputs fname">
            <!-- <label class="input-label">First Name</label> -->
            <input class="input-text">
         </div>
      </div>
      <div class="form-firstrow__firstelems">
         <div class="inputs lname">
           <!--  <label class="input-label">Last Name</label> -->
            <input class="input-text">
         </div>
      </div>
   </div>
   
   <div class="otherelems">
     <div class="form-otherrow__otherelems">
        <div class="inputs">
           <!-- <label class="input-label">First Name</label> -->
           <input class="input-text">
        </div>
     </div>
     <div class="form-otherrow__otherelems">
        <div class="inputs">
           <!-- <label class="input-label">Title</label> -->
           <input class="input-text">
        </div>
     </div>
   </div>
   
</div>

CSS

/* desktop */

.form-firstrow {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.form-firstrow__firstelems {
  display: flex;
  flex: 1;
  /* flex-basis: 50%; */
}

.form-firstrow__firstelems .inputs.title  {
  display: flex;
  flex: 2;
  /* flex-basis: 40%; */
  margin: 0 10px;
}

.form-firstrow__firstelems .inputs.fname  {
  display: flex;
  flex: 3;
  /* flex-basis: 60%; */
  margin: 0 10px;
}

.form-firstrow__firstelems .inputs.lname  {
  display: flex;
  flex: 1;
  /* flex-basis: 100%; */
  margin: 0 10px;
}

.form-firstrow__firstelems .inputs input  {
  width: 100%;
}


.otherelems {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.form-otherrow__otherelems {
  display: flex;
  flex: 1;
  /* flex-basis: 50%; */
}
.form-otherrow__otherelems .inputs {
  display: flex;
  flex: 1;
  /* flex-basis: 100%; */
  margin: 0 10px;
}
.form-otherrow__otherelems .inputs input {
  width: 100%;
}



/* mobile */


@media only screen and (max-width: 767px) {
  .form-firstrow__firstelems {
    display: flex;
    flex-basis: 100%;
  }
  .form-firstrow__firstelems .inputs.title  {
    display: flex;
    flex: 2;
    /* flex-basis: 40%; */
  }

  .form-firstrow__firstelems .inputs.fname  {
    display: flex;
    flex: 3;
    /* flex-basis: 60%; */
  }
  
  .form-otherrow__otherelems {
    display: flex;
    flex-basis: 100%;
  }
}