<div class="form">
  <div class="control">
    <label for="text">Text:</label>
    <input type="text" id="text" />
  </div>
  <div class="control">
    <label for="search">Search:</label>
    <input type="search" id="search" />
  </div>
  <div class="control">
    <label for="password">Password:</label>
    <input type="password" id="password" />
  </div>
  <div class="control">
    <label for="tel">Tel:</label>
    <input type="tel" id="tel" />
  </div>
  <div class="control">
    <label for="email">Email:</label>
    <input type="email" id="email" />
  </div>
  <div class="control">
    <label for="url">Url:</label>
    <input type="url" id="url" />
  </div>
  <div class="control">
    <label for="number">Number:</label>
    <input type="number" id="number" />
  </div>
  <div class="control">
    <label for="checkbox">Checkbox:</label>
    <input type="checkbox" id="checkbox" />
  </div>
  <div class="control">
    <label for="radio">Radio:</label>
    <input type="radio" id="radio" />
  </div>
  <div class="control">
    <label for="button">Button:</label>
    <input type="button" id="button" value="button" />
  </div>
  <div class="control">
    <label for="submit">Submit:</label>
    <input type="submit" id="submit" />
  </div>
  <div class="control">
    <label for="reset">Reset:</label>
    <input type="reset" id="reset" />
  </div>
  <div class="control">
    <label for="image">Image:</label>
    <input type="image" id="image" src="https://www.w3cplus.com/sites/default/files/blogs/2020/2004/input-8.png" alt="button" width="100" />
  </div>
  <div class="control">
    <label for="file">File:</label>
    <input type="file" id="file" />
  </div>
  <div class="control">
    <label for="datetime-local">Datetime-local:</label>
    <input type="datetime-local" id="datetime-local" />
  </div>
  <div class="control">
    <label for="date">Date:</label>
    <input type="date" id="date" />
  </div>
  <div class="control">
    <label for="month">Month:</label>
    <input type="month" id="month" />
  </div>
  <div class="control">
    <label for="week">Week:</label>
    <input type="week" id="week" />
  </div>
  <div class="control">
    <label for="time">Time:</label>
    <input type="time" id="time" />
  </div>
  <div class="control">
    <label for="range">Range:</label>
    <input type="range" id="range" />
  </div>
  <div class="control">
    <label for="color">Color:</label>
    <input type="color" id="color" />
  </div>
  <div class="control">
    <label for="hidden">Hidden:</label>
    <input type="hidden" id="hidden" />
  </div>
</div>
@import url("https://fonts.googleapis.com/css?family=Gochi+Hand");

body {
  width: 100vw;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background-color: #291642;
  font-family: "Gochi Hand", sans-serif;
  font-size: 130%;
  letter-spacing: 0.1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.form {
  min-width: 50vw;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 15px 10px;
  color: #fff;
}

.control {
  display: flex;
  align-items: center;
}

.control label {
  display: inline-flex;
  min-width: 100px;
  justify-content: flex-end;
  margin-right: 2px;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.