JSFiddle - React, Tailwind, and code Playground

by Yolanda Robles

HTML

<div class="formulario">
<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="criterioBusqLupa">
      <label id="lblCentroProductor" class="label" for="txtCentroProductor">Centro <Productor:>    </Productor:></label>
      <div class="control">
        <input type="text" class="textbox textboxLupa1" name="txtCentroProductor">
        <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 class="criterioBusqLupa">
      <label id="lblCentroProductor" class="label" for="txtCentroProductor">Centro Productor: <Productor:>    </Productor:></label>
      <div...

CSS

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

.criterioBusq
{
    display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    width:320px;
}

.criterioBusqLupa
{
    display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    width:70%;
}

.label
{
  width:150px;
  line-height: 25px;
  text-align:right;
}

.textboxLupa1
{
  width:40px;
}