Tailwind CSS grid

HTML

<html>

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
  </head>

  <body>
    <div class="mt-10 mx-20 grid gap-14 md:grid-cols-2">
    
      <!-- First container (left) -->
      <div class="container shadow-lg rounded-lg px-8 pt-6 bg-gray-50">
        <h1 class="text-xl font-bold py-2">Container 1</h1>
        <div>
          <details class="pt-6 pb-4">
            <summary class="rounded-lg hover:bg-gray-100 cursor-pointer font-medium text-lg">
              Question
            </summary>
            <span class="pt-2 pr-8">Answer</span>
          </details>
        </div>
      </div>
      
      <!-- Second container (right) -->
      <div class="container shadow-lg rounded-lg px-8 pt-6 bg-gray-50">
        <h1 class="text-xl font-bold py-2">Container 2</h1>
        <div>
          <details class="pt-6 pb-4">
            <summary class="rounded-lg hover:bg-gray-100 cursor-pointer font-medium text-lg">
              Question
            </summary>
            <span class="pt-2 pr-8">Answer</span>
          </details>
        </div>
      </div>
      
    </div>
  </body>

</html>