Question 45988 in CSS Question posted in
Some basic documentation can be found here.

Small problem with CSS Grid and Flexbox using Tailwind

Picture of corresponding example

I want to move the Hello text, next to the border of CapName instead of underneath it. Any ideas?

   <div className='h-screen dark:bg-gray-900 grid items-center justify-items-center'>
        <div className='h-20 w-3/5 dark:bg-gray-500 border-2'>
          <div>
            <div className='border-2 p-2 w-2/5 h-full flex items-center '>
              <h1 className='text-2xl text-white'>Capsule # / CapName</h1>
            </div>
            <div>
              <h1 className='text-white'>Hello</h1>
            </div>
          </div>
        </div>
      </div>

I have tried moving the div of the Hello text other places but they remove the Hello text completely out of the large div container.

Tags:

2

Answers


  1. 0

    Are you looking for something like this?

    <div class="h-screen bg-gray-900 grid items-center justify-items-center">
  <div class="h-20 w-3/5 dark:bg-gray-500 border-2">
    <!-- adding flex here will put the items next to eachother when using 2x child divs -->
    <div class="flex">
      <div class="border-2 p-2 w-2/5 h-full flex items-center ">
        <h1 class="text-2xl text-white">Capsule # / CapName</h1>
      </div>
      <div>
        <h1 class="text-white">Hello</h1>
      </div>
    </div>
  </div>
</div>

    And a couple of alternate ideas for you…

    Center With Flexbox

    <div class="flex h-screen bg-gray-900">
  <!-- flex (above) while using (m-auto) below will center your div -->
  <div class="m-auto flex w-3/5 border-2 bg-gray-500">
    <!-- removed height above so can grow as much as needed (as you're constraining the width) -->
    <!-- flex above with 2x child divs will align them side-by-side -->
    <div class="w-2/5 border-2 p-2">
      <h1 class="text-2xl text-white">Capsule # / CapName</h1>
    </div>
    <div class="p-2">
      <h1 class="text-white">Hello</h1>
    </div>
  </div>
</div>

    Layout Using Grid

    <div class="flex h-screen bg-gray-900">
  <!-- flex (above) while using (m-auto) below will center your div -->
  <div class="m-auto grid w-3/5 grid-cols-2 border-2 bg-gray-500">
  <!-- you could also remove the width below and use grid and grid-cols-2 above-->
    <div class="border-2 p-2">
      <h1 class="text-2xl text-white">Capsule # / CapName</h1>
    </div>
    <div class="p-2">
      <h1 class="text-white">Hello</h1>
    </div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    Is this layout you want?

    You need to include the flex property to the parent div containing the other 2 children div like shown with comment in below

    Your code

     <div className='h-screen dark:bg-gray-900 grid items-center justify-items-center'>
        <div className='h-20 w-3/5 dark:bg-gray-500 border-2'>
          <div> <!--this is parent div -->

             <!-- child1 -->
            <div className='border-2 p-2 w-2/5 h-full flex items-center '>
              <h1 className='text-2xl text-white'>Capsule # / CapName</h1>
            </div>

            <!-- child2 -->
            <div>
              <h1 className='text-white'>Hello</h1>
            </div>
          </div>
        </div>
      </div>

    Corrected code

    <div class="grid h-screen items-center justify-items-center dark:bg-gray-900">
  <div class="w-3/5 border-2 dark:bg-gray-500">
    <div class="flex items-center space-x-1">
      <div class="h-full w-3/5 border-2 p-2">
        <h1 class="text-2xl text-white">Capsule # / CapName</h1>
      </div>
      <div>
        <h1 class="text-white">Hello</h1>
      </div>
    </div>
  </div>
</div>

    see live code here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search