JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="inner-wrapper">


<span class="block">
  <span>Hello I'm your input field and label</span>
  <span class="error">--This is an error message--</span>
</span>

  </div>
</div>

CSS

.wrapper {
}

.inner-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.block {
  position: relative;
}

.error {
  position: absolute;
  width:100%;
  color: #f00;
}