From 76685c9042ea1fa1b5a9d68210adadfa5ad1cb5e Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Sat, 16 Dec 2017 11:16:43 -0500
Subject: [PATCH] Clean up form grid example

---
 docs/source/docs/examples/forms.blade.md | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/docs/source/docs/examples/forms.blade.md b/docs/source/docs/examples/forms.blade.md
index 49fa7fb66..bb4b286cf 100644
--- a/docs/source/docs/examples/forms.blade.md
+++ b/docs/source/docs/examples/forms.blade.md
@@ -87,23 +87,23 @@ Tailwind doesn't include purpose-built form control classes out of the box, but
 
 @component('_partials.code-sample', ['class' => 'flex justify-center p-8'])
 <form class="w-full max-w-md">
-  <div class="-mx-3 md:flex mb-6">
-    <div class="md:w-1/2 px-3 mb-6 md:mb-0">
+  <div class="flex flex-wrap -mx-3 mb-6">
+    <div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
       <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-first-name">
         First Name
       </label>
       <input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-red rounded py-3 px-4 mb-3" id="grid-first-name" type="text" placeholder="Jane">
       <p class="text-red text-xs italic">Please fill out this field.</p>
     </div>
-    <div class="md:w-1/2 px-3">
+    <div class="w-full md:w-1/2 px-3">
       <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-last-name">
         Last Name
       </label>
       <input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-lighter rounded py-3 px-4" id="grid-last-name" type="text" placeholder="Doe">
     </div>
   </div>
-  <div class="-mx-3 md:flex mb-6">
-    <div class="md:w-full px-3">
+  <div class="flex flex-wrap -mx-3 mb-6">
+    <div class="w-full px-3">
       <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-password">
         Password
       </label>
@@ -111,14 +111,14 @@ Tailwind doesn't include purpose-built form control classes out of the box, but
       <p class="text-grey-dark text-xs italic">Make it as long and as crazy as you'd like</p>
     </div>
   </div>
-  <div class="-mx-3 md:flex mb-2">
-    <div class="md:w-1/2 px-3 mb-6 md:mb-0">
+  <div class="flex flex-wrap -mx-3 mb-2">
+    <div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
       <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-city">
         City
       </label>
       <input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-lighter rounded py-3 px-4" id="grid-city" type="text" placeholder="Albuquerque">
     </div>
-    <div class="md:w-1/2 px-3">
+    <div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
       <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-state">
         State
       </label>
@@ -133,7 +133,7 @@ Tailwind doesn't include purpose-built form control classes out of the box, but
         </div>
       </div>
     </div>
-    <div class="md:w-1/2 px-3">
+    <div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
       <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-zip">
         Zip
       </label>