Paired Fields

A fieldset that pairs two name fields

Preview

PaletteDarkMonoWarm

HTML

<form>
  <fieldset>
    <legend>Name</legend>
    <label>Given <input name="given" /></label>
    <label>Family <input name="family" /></label>
  </fieldset>
</form>

CSS

:root {
  --ink: #241c16;
  --paper: #fffaf1;
  --accent: #d4552b;
  --accent-2: #4338ca;
  --on-accent: #fff;
  --muted: #6a6156;
  --line: #d7ccb8;
  --chip: #efe6d6;
}

form { margin: 0; color: var(--ink); }

fieldset {
  display: grid;
  gap: 0.65rem;
  margin: 0;
  padding: 0.85rem 1rem 1rem;
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  background: var(--paper);
}

legend { padding-inline: 0.3rem; font-weight: 750; }

label {
  display: grid;
  gap: 0.25rem;
  font-size: 0.85rem;
}

input {
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 0.45rem;
  background: var(--on-accent);
  color: inherit;
  font: inherit;
}

Tailwind

<style>
:root {
  --ink: #241c16;
  --paper: #fffaf1;
  --accent: #d4552b;
  --accent-2: #4338ca;
  --on-accent: #fff;
  --muted: #6a6156;
  --line: #d7ccb8;
  --chip: #efe6d6;
}
</style>
<form class="m-0 text-[var(--ink)]">
  <fieldset class="grid gap-[0.65rem] m-0 p-[0.85rem_1rem_1rem] [border:1px_solid_var(--line)] rounded-[0.85rem] bg-[var(--paper)]">
    <legend class="px-[0.3rem] font-[750]">Name</legend>
    <label class="grid gap-[0.25rem] text-[0.85rem]">Given <input class="p-[0.4rem_0.55rem] [border:1px_solid_var(--line)] rounded-[0.45rem] bg-[var(--on-accent)] text-inherit [font:inherit]" name="given" /></label>
    <label class="grid gap-[0.25rem] text-[0.85rem]">Family <input class="p-[0.4rem_0.55rem] [border:1px_solid_var(--line)] rounded-[0.45rem] bg-[var(--on-accent)] text-inherit [font:inherit]" name="family" /></label>
  </fieldset>
</form>