JSFiddle - React, Tailwind, and code Playground

by Galen Gidman

HTML

<div>
  <label for="text">Name</label>
  <input id="text" type="text" placeholder="name">
</div>

<div>
  <label for="textarea">Message</label>
  <textarea name="" id="" cols="30" rows="10" placeholder="you can write your message right here and you can do other cool stuff in here to just so long as it wraps"></textarea>
</div>

CSS

body {
  background: lightGray;
  font-family: sans;
}

div {
  position: relative;
  padding: 10px;
}

label {
  position: absolute;
  top: 20px;
  left: 20px;
  margin-right: 5px;
  pointer-events: none;
}

input,
textarea {
  display: block;
  width: 60%;
  padding: 10px;
  border: none;
  background: white;
  font-size: inherit;
  line-height: inherit;
  font-family: inherit;
}

JavaScript

$( function() {

	$( 'input, textarea' ).each( function() {
  	var $this = $( this )
    var $label = $this.siblings( 'label' )
    
    $this.css( 'text-indent', $label.outerWidth( true ) )
  } )

} )