JSFiddle - React, Tailwind, and code Playground

by Yolanda Robles

HTML

<div class="formulario">


<div class="col1">
  <div class="criterioBusq">
      <label id="lblContrato" class="label" for="txtContrato">Contrato:</label>
      <div class="control">
        <input type="text" class="textbox" name="txtContrato">
      </div>
  </div>
  <div class="criterioBusq">
      <label id="lblFDesde" class="label" for="dtFechaDesde">F. Desde:</label>
      <div class="control">
        <input type="date" class="datepicker" name="dtFechaDesde">
      </div>
  </div>
  <div class="criterioBusq">
      <label id="lblFHasta" class="label" for="dtFechaHasta">F. Hasta:</label>
      <div class="control">
      <input type="date" class="datepicker" name="dtFechaHasta">
      </div>
  </div>
  <div class="criterioBusq">
      <label id="lblEstado" class="label" >Tipo Contrato:</label>
      <div class="control">
        <select class="combo">
          <option value="volvo">Contrato Origen</option>
          <option value="saab">Contrato Salida</option>
        </select>
      </div>
  </div>
  <div class="criterioBusq">
      <label id="lblCentroProductor" class="label" for="txtCentroProductor">Centro Productor:</label>
      <div class="control">
        <input type="text" class="textbox textboxLupa1" name="txtCentroProductor">
        <input type="button" class="button btnLupa" />
        <input type="text" class="textbox textboxLupa2" name="txtCentroProductorDs">
      </div>
  </div>
  <div class="criterioBusq">
  <label id="lblEstado" class="label" >Tipo Contrato:</label>
      <div class="control">
        <select class="combo">
          <option value="volvo">Contrato Origen</option>
          <option value="saab">Contrato Salida</option>
        </select>
      </div>
  </div>
</div>
<div class="col2">
  <div class="criterioBusq">
      <label id="lblContrato" class="label" for="txtContrato">Contrato:</label>
      <div class="control">
        <input type="text" class="textbox" name="txtContrato">
      </div>
  </div>
  <div...

CSS

.criterioBusq{
    display:flex;
    flex-direction: row; 
    padding-left: 20px;
    padding-top: 15px;
    flex-grow: 2;
    flex-wrap: nowrap;
    flex: 0 0 350px;
    flex-grow: 8;
}

.formulario{
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.control{
  margin-left: 5px;
  margin-right: 5px;
  //background-color: yellow;
  display:flex;
  flex-wrap: nowrap;
}

.label
{
  line-height: 25px;
  text-align:right;
  flex: 0 0 170px; // que no crezca, que no srink y tamaño fijo
  //margin-left: 30px;
}

.textbox{
  //width:100px;
}

.datepicker
{
  //width:100px;
}

.textboxLupa1{
  width: 80px;
  //flex-grow:5;
}

.textboxLupa2{
  width: 200px;
  //margin-right: 30px;
  //flex-grow: 2;
}