<form>
  <h1>Profile settings</h1>
  <ul>
    <li>
      <label for="name">Name</label>
      <input id="name" name="name">
    </li>
    <li>
      <label for="handle">Handle</label>
      <input id="handle" name="handle">
    </li>
    <li>
      <label for="location">Location</label>
      <input id="location" name="location">
    </li>
    <li>
      <label for="website">Website URL</label>
      <input id="website" name="website">
    </li>
    <li>
      <label for="bio">Short bio</label>
      <input id="bio" name="bio">
    </li>
  </ul>
</form>
* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

ul {
  display: grid;
  grid-template-columns: max-content auto;
  gap: 1em;
  
  max-width: 20em;
}

li {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
}

form {
  padding: 1em;
}

h1 {
  margin-bottom: 0.5em;
}

input {
  font-size: inherit;
}