<form>
  <ul>
    <li><label for=name>Name:</label>
      <input id=name name=name>
    </li>
    <li><label for=email>Email:</label>
      <input id=email name=email type=email>
    </li>
    <li><label for=tel>Telephone:</label>
      <input id=tel name=tel type=tel>
    </li>
    <li><label for=url>Homepage:</label>
      <input id=url name=url type=url>
    </li>
    <li><label for=bday>Birthday:</label>
      <input id=bday name=bday type=date>
    </li>
  </ul>
</form>
form ul {
  display: grid;
  grid-template-columns: min-content 1fr;
  gap: 1rem;
}

@supports (grid-template-columns: subgrid) {
  form ul li {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
  }
}
@supports not (grid-template-columns: subgrid) {
  form ul li {
    display: contents;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.