Tailwind item placement

Question

I'm using tailwind css to create this page. But I cant get the heading over the table and the button under the table. Can anyone please help me?

I have attached the image of what it looks like and where I want to place the heading and the button.

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
<div class="flex flex-row items-center justify-center">
  <P class="font-bold flex flex-initial">Sms Template:</P>
  <div class="min-h-screen flex items-center justify-center">

    <div class="firstbox border border-black">
      <div class="mx-11 my-10 px-10">
        <p class="py-2 text-lg font-semibold">Message For:</p>
        <select class="firstbox_select text-center" name="message" id="message">
          <option selected disabled>Invoice</option>
        </select>
      </div>
      <div class="mx-11 my-20 px-10">
        <P class="py-4 text-lg font-semibold">Available parameters</P>
        <table class="table auto text-center">
          <tbody>
            <tr>
              <td class="border border-black tb px-4">Client Full name</td>
              <td class="border border-black tb px-4">[fullname]</td>
            </tr>
            <tr>
              <td class="border border-black tb px-4">Invoice ID</td>
              <td class="border border-black tb px-4">[invoice_id]</td>
            </tr>
            <tr>
              <td class="border border-black tb px-4">Invoice Date</td>
              <td class="border border-black tb px-4">[invoice_date]</td>
            </tr>
            <tr>
              <td class="border border-black tb px-4">....</td>
              <td class="border border-black tb px-4"></td>
            </tr>
            <tr>
              <td class="border border-black tb px-4">....</td>
              <td class="border border-black tb px-4"></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <div>
    <input type="submit" value="Log In" class="w-full py-3 mt-6 font-medium tracking-widest text-white uppercase bg-gray-700 shadow-lg focus:bg-gray-600">
  </div>
</div>

Answer 1

As pointed out in one of the comments, you need to switch flex-row to flex-col at the top level div to apply the style of flex-direction: column.

Basically,

• left to right: flex
• top to bottom: flex flex-col

You can also just use flex instead of specifying flex flex-row whenever you want row alignment. It seems like you might know this already since in the second div you just specify flex.

Aside from the question, I notice that you have some custom classes in your HTML. If you're not using tailwind via CDN you should attempt to add the additional styling to the tailwind.config.js file so that all of your styling is in the markup.

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
<div class="flex flex-col items-center justify-center">
  <P class="font-bold flex flex-initial">Sms Template:</P>
  <div class="flex items-center justify-center">

    <div class="firstbox border border-black">
      <div class="mx-11 my-10 px-10">
        <p class="py-2 text-lg font-semibold">Message For:</p>
        <select class="firstbox_select text-center" name="message" id="message">
          <option selected disabled>Invoice</option>
        </select>
      </div>
      <div class="mx-11 my-20 px-10">
        <P class="py-4 text-lg font-semibold">Available parameters</P>
        <table class="table auto text-center">
          <tbody>
            <tr>
              <td class="border border-black tb px-4">Client Full name</td>
              <td class="border border-black tb px-4">[fullname]</td>
            </tr>
            <tr>
              <td class="border border-black tb px-4">Invoice ID</td>
              <td class="border border-black tb px-4">[invoice_id]</td>
            </tr>
            <tr>
              <td class="border border-black tb px-4">Invoice Date</td>
              <td class="border border-black tb px-4">[invoice_date]</td>
            </tr>
            <tr>
              <td class="border border-black tb px-4">....</td>
              <td class="border border-black tb px-4"></td>
            </tr>
            <tr>
              <td class="border border-black tb px-4">....</td>
              <td class="border border-black tb px-4"></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <div>
    <input type="submit" value="Log In" class="w-full py-3 mt-6 font-medium tracking-widest text-white uppercase bg-gray-700 shadow-lg focus:bg-gray-600">
  </div>
</div>