JSFiddle - React, Tailwind, and code Playground

by batcave

HTML

<table>
  <tr class="input input--is-required">
    <td>
      <label for="your-input" class="input__label">Name</label>
    </td>
    <td>
      <input type="text" id="your-input" class="input__element"/>
      <div class="input__error">Du måste ange namn</div>
    </td>
  </tr>
  <tr class="input input--is-required">
    <td>
      <label for="your-input" class="input__label">Name</label>
    </td>
    <td>
      <input type="text" id="your-input" class="input__element"/>
      <div class="input__error">Du måste ange namn</div>
    </td>
  </tr>
</table>

CSS

.input {
  display: flex;
  align-items: center;
}

.input__label {
  display: block;
  margin-bottom: .5rem;
}

.input--is-required .input__label::after {
  content: '*';
}

.input__element {
  padding: .5rem;
  border: 1px solid #dcdcdc;
}

.input__error {
  display: none;
  padding-top: .5rem;
  color: red;
}

.input--has-errors .input__error {
  display: block;
}