Inline Change Password Row

<!-- A settings row: description on the left, the form on the right, stacked below sm. -->
<div class="flex w-full max-w-2xl flex-col gap-4 border-b border-gray-200 py-5 sm:flex-row sm:items-start sm:justify-between dark:border-gray-800">
  <div class="sm:max-w-xs">
    <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Password</h3>
    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Set a new password for your account.</p>
  </div>

  <form class="w-full space-y-3 sm:max-w-xs" novalidate>
    <div>
      <label for="cp-new" class="block text-sm font-medium text-gray-700 dark:text-gray-300">New password</label>
      <input id="cp-new" name="newPassword" type="password" autocomplete="new-password"
        class="mt-1.5 block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus-visible:ring-blue-400" />
    </div>
    <div>
      <label for="cp-confirm" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Confirm password</label>
      <input id="cp-confirm" name="confirmPassword" type="password" autocomplete="new-password"
        class="mt-1.5 block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus-visible:ring-blue-400" />
    </div>
    <button type="submit"
      class="inline-flex w-full items-center justify-center rounded-lg bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white hover:bg-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-950 sm:w-auto">
      Save
    </button>
  </form>
</div>