<div class="columns cols-3 cols-2-p gap_xs gap-h_s">
  <div class="form-box">
  <label for="e-text" class="mini-label">Text</label>
  <input class="input" type="text" id="e-text" placeholder="Just text">
</div>
<div class="form-box">
  <label for="e-fav-fruit" class="mini-label">Text with datalist</label>
    <input class="input" type="text" list="fruits" id="e-fav-fruit" placeholder="data-list example">
    <datalist id="fruits">
      <option value="Apple">
      <option value="Orange">
      <option value="Peach">
      <option value="Melon">
      <option value="Strawberry">
    </datalist>
</div>
<div class="form-box">
  <label for="e-text-readonly" class="mini-label">Text:readonly</label>
  <input class="input" type="text" id="e-text-readonly" value="Only to read." readonly>
</div>
<div class="form-box">
  <label for="e-text-disabled" class="mini-label">Text:disabled</label>
  <input class="input" type="text" id="e-text-disabled" value="Disabled." disabled>
</div>
<div class="form-box">
  <label for="e-password" class="mini-label">Password</label>
  <input class="input" type="password" id="e-password" placeholder="•••••••••••">
</div>
<div class="form-box">
  <label for="e-email" class="required mini-label">Email</label>
  <input class="input" type="email" id="e-email" name="email" required>
</div>
<div class="form-box">
  <label for="e-number" class="mini-label">Number</label>
  <input class="input" type="number" name="number" id="e-number" value="42">
</div>
<div class="form-box">
  <label for="e-tel" class="mini-label">Tel</label>
  <input class="input" type="tel" name="tel" id="e-tel">
</div>
<div class="form-box">
  <label for="e-url" class="mini-label">URL</label>
  <input class="input" type="url" name="url" id="e-url" placeholder="https://www.fortrabbit.com">
</div>
</div>