Display a working and broken search form example.

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css">

<main>
  <h1>Broken Search Group</h1>

  <p>Working Example:</p>
  <form role="search" action="https://duckduckgo.com/" method="get">
    <!-- notice search input is first -->
    <input placeholder="Search..." type="search" name="q" required>
    <input type="hidden" name="sites" value="example.com">
    <button class="icon-button" type="submit" aria-label="Search">Go</button>
  </form>

  <p>Broken Example:</p>
  <form role="search" action="https://duckduckgo.com/" method="get">
    <!-- notice hidden input is first -->
    <input type="hidden" name="sites" value="example.com">
    <input placeholder="Search..." type="search" name="q" required>
    <button class="icon-button" type="submit" aria-label="Search">Go</button>
  </form>
</main>