JSFiddle - React, Tailwind, and code Playground

by Richard Hunter

HTML

<div class="project ng-untouched ng-pristine ng-valid">
  <label class="label" for="title-0">tihkhkhhkhtle</label>

  <input class="input ng-untouched ng-pristine ng-valid" id="title-0">

  <button>
    delete
  </button>

  <div class="error-message">
    error message
  </div>

</div>

CSS

body {
  font-family: helvetica;
}

.project {
  background: pink;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 4px;
  grid-template-areas:
    "label input button"
    ". error ."
}

.label {
    text-transform: lowercase;
    color: #333;
    font-size: 14px;
    line-height: 20px;
    margin: 4px;
    text-align: right;
}