Form Two Column

<section class="ws-forms bg-[var(--ws-forms-bg)]">
  <div class="mx-auto max-w-5xl px-4 py-10 sm:px-6 lg:px-8">
    <form class="overflow-hidden rounded-2xl border border-[var(--ws-forms-input-border)] bg-[var(--ws-forms-bg)] shadow-sm">
      <div class="border-b border-[var(--ws-forms-input-border)] px-6 py-5">
        <h2 class="text-lg font-semibold text-[var(--ws-forms-text)]">Workspace details</h2>
        <p class="mt-1 text-sm text-[var(--ws-forms-label)]">Use a wider two-column layout for setup flows with grouped information.</p>
      </div>
      <div class="grid gap-0 lg:grid-cols-[0.9fr_1.1fr]">
        <div class="border-b border-[var(--ws-forms-input-border)] bg-black/[0.02] px-6 py-6 lg:border-b-0 lg:border-r">
          <h3 class="text-sm font-semibold uppercase tracking-[0.16em] text-[var(--ws-forms-label)]">Setup notes</h3>
          <ul class="mt-4 space-y-3 text-sm text-[var(--ws-forms-label)]">
            <li>Keep internal naming and public naming separate.</li>
            <li>Choose one owner for billing and one for daily operations.</li>
            <li>Use support email aliases instead of personal inboxes.</li>
          </ul>
        </div>
        <div class="px-6 py-6">
          <div class="grid gap-5 sm:grid-cols-2">
            <div>
              <label for="workspace-name" class="block text-sm font-medium text-[var(--ws-forms-text)]">Workspace name</label>
              <input id="workspace-name" type="text" placeholder="Acme Labs" class="mt-1.5 w-full rounded-lg border border-[var(--ws-forms-input-border)] bg-[var(--ws-forms-input-bg)] px-3 py-2.5 text-sm text-[var(--ws-forms-text)] focus:border-[var(--ws-forms-input-focus)] focus:outline-none focus:ring-2 focus:ring-[var(--ws-forms-input-focus)]/15" />
            </div>
            <div>
              <label for="workspace-slug" class="block text-sm font-medium text-[var(--ws-forms-text)]">Workspace URL</label>
              <input id="workspace-slug" type="text" placeholder="acme-labs" class="mt-1.5 w-full rounded-lg border border-[var(--ws-forms-input-border)] bg-[var(--ws-forms-input-bg)] px-3 py-2.5 text-sm text-[var(--ws-forms-text)] focus:border-[var(--ws-forms-input-focus)] focus:outline-none focus:ring-2 focus:ring-[var(--ws-forms-input-focus)]/15" />
            </div>
            <div>
              <label for="owner-name" class="block text-sm font-medium text-[var(--ws-forms-text)]">Owner name</label>
              <input id="owner-name" type="text" placeholder="Maya Chen" class="mt-1.5 w-full rounded-lg border border-[var(--ws-forms-input-border)] bg-[var(--ws-forms-input-bg)] px-3 py-2.5 text-sm text-[var(--ws-forms-text)] focus:border-[var(--ws-forms-input-focus)] focus:outline-none focus:ring-2 focus:ring-[var(--ws-forms-input-focus)]/15" />
            </div>
            <div>
              <label for="owner-email" class="block text-sm font-medium text-[var(--ws-forms-text)]">Owner email</label>
              <input id="owner-email" type="email" placeholder="maya@acme.io" class="mt-1.5 w-full rounded-lg border border-[var(--ws-forms-input-border)] bg-[var(--ws-forms-input-bg)] px-3 py-2.5 text-sm text-[var(--ws-forms-text)] focus:border-[var(--ws-forms-input-focus)] focus:outline-none focus:ring-2 focus:ring-[var(--ws-forms-input-focus)]/15" />
            </div>
            <div class="sm:col-span-2">
              <label for="workspace-description" class="block text-sm font-medium text-[var(--ws-forms-text)]">Description</label>
              <textarea id="workspace-description" rows="4" placeholder="What is this workspace used for?" class="mt-1.5 w-full rounded-lg border border-[var(--ws-forms-input-border)] bg-[var(--ws-forms-input-bg)] px-3 py-2.5 text-sm text-[var(--ws-forms-text)] focus:border-[var(--ws-forms-input-focus)] focus:outline-none focus:ring-2 focus:ring-[var(--ws-forms-input-focus)]/15"></textarea>
            </div>
          </div>
          <div class="mt-6 flex justify-end gap-3">
            <button type="button" class="rounded-lg border border-[var(--ws-forms-input-border)] px-4 py-2.5 text-sm font-medium text-[var(--ws-forms-text)]">Cancel</button>
            <button type="submit" class="rounded-lg bg-[var(--ws-forms-action-bg)] px-4 py-2.5 text-sm font-semibold text-[var(--ws-forms-action-text)]">Save workspace</button>
          </div>
        </div>
      </div>
    </form>
  </div>
</section>