JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
* {
  box-sizing: border-box;
}
body {
  margin: 0 auto;
  width: 100%;
  height: 100%;
}
/* Example responsive grid layout */
.c-1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-auto-rows: 200px;
  margin: 0 auto;
  overflow: hidden;
  width: 100%;
}
.c-2 {
  background-color: #ddd;
  padding: 1em;
  margin: 0 auto;
  border: 1px solid red;
  width: 100%;
  grid-column: 1/3;
}
.c-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  margin: 0 auto;
  border: 1px solid green;
  width: 100%;
}
.c-4 {
  padding: 1em;
}
.c-4:first-child > .c-4 {
  border: 1px solid blue;
}
.c-4 input, .c-4 label {
  width: 90%;
}
</style>
</head>
<body>
  <div class=c-1>
    <div class=c-2>
      Grid Column 1/3
      <div class=c-3>
        <div class=c-4>
          <label>Label 1</label>
          <input type=text size=10>
          <div class=c-4>
            <label>Label 2</label>
            <input type=text size=10>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>