0

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.

Ibrahim
  • 3
  • 1
  • Please make sure to include your CSS in your example, as it can change the answer dramatically. If you can provide a functional example as a [StackSnippet](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do), that would be ideal. – Jake Mar 20 '23 at 23:03
  • Broadly speaking though, there are many many ways to control alignment in CSS, and you can probably find 20+ other SO posts with similar questions with a quick Google search. [Such as this one](https://stackoverflow.com/questions/10451445/two-div-blocks-on-same-line). If you have already tried all of this and believe your use case is not addressed by previous answers or is unique in some way, please also indicate this in your question. – Jake Mar 20 '23 at 23:04
  • CSS is already into the code, as I have mentioned I am using tailwind for this project so CSS is integrated within the class of my code, as most lines of the code have "className" attribute. Hopefully that helps. :) – Ibrahim Mar 23 '23 at 23:50

2 Answers2

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>
Rey Arlena
  • 99
  • 4
  • This worked, thank you so much! Sorry for the late reply also haha, been busy with college and everything! Thanks again! – Ibrahim Mar 23 '23 at 23:51
-1

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

MagnusEffect
  • 3,363
  • 1
  • 16
  • 41