JSFiddle - React, Tailwind, and code Playground

by Max Hung

HTML

<!DOCTYPE html>
<div>Baseline___
  <input value=" ">
</div>
<div>Baseline___
  <input placeholder=" ">
</div>
<div>
  Baseline___
  <input id="test">
</div>

CSS

div {
  display: flex;
  align-items: baseline;
  padding: 1em;
}

input {
  flex: 1;
}

JavaScript

fields = document.getElementsByTagName('input');

for (i = 0, len = fields.length; i < len; i++) {
  fields[i].placeholder = 'bacon bacon cheese';
  fields[i].style.display = 'none';
  fields[i].style.display = 'flex';
}