JSFiddle - React, Tailwind, and code Playground

by Henrique_Araujo

HTML

<form class="form">
  <div class="section">
    <div class="control-group">
      <label class="control-label">Selecione algo</label>
      <select class="control">
            <option disabled>Selecione Algo</option>
      </select>
    </div>

    <div class="control-group">
      <label class="control-label">Escreva algo</label>
      <input type="text" class="control"/>
    </div>

  </div>

  <div class="section">
    <div class="control-group">
      <label class="control-label">Escreva algo</label>
      <input type="text" class="control"/>
    </div>

    <div class="control-group">
      <label class="control-label">Marque algo</label>
      <label>
        <input type="checkbox"/>
        Concordo (checkbox)
      </label>
    </div>

  </div>
</form>

CSS

.form {
  display: flex;
  width: 550px;
  background-color: black;
  color: #CCC;
  padding: 10px;
}

.form .section {
  flex-grow: 1;
  flex-direction: column;
  padding: 30px;
}

.form .section .control-group {
  margin-top: 10px;
}

.form .section .control-group .control {
  width: 100%;
}


.form .section .control-group .control-label {
  display: block;
  width: 100%;
  margin-bottom: 4px;
}