Position a div to the right side

Question

I'm using Tailwind CSS and wish to float my div to the right-hand side. Here's the thing. I have a div of 100% width that is displayed as grid-cols-2. This means I have two divs inside the main div ( both sharing 50% width to make the complete 100%)

I'll add an image to it - please see it.

<div class="grid grid-cols-1 md:grid-cols-2 mt-10 mb-10 px-4 mx-auto">
    <!-- Left Item -->
    <div class="flex flex-col w-full text-left text-gray-800 dark:text-gray-200 p-4">
        <h1 class="text-3xl md:text-4xl font-bold mb-4">About Project</h1>
        <p class="">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce turpis ante, eleifend vitae turpis ultricies, eleifend ullamcorper ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas, metus id tempor elementum, libero libero consectetur tortor, nec auctor odio purus eget urna. Ut iaculis hendrerit leo in fringilla. Fusce euismod arcu tortor, sed rhoncus quam semper et. Vestibulum facilisis gravida nisi a commodo. Aenean tempus accumsan lectus, eget dapibus felis aliquet vel. Donec aliquet massa quis augue ullamcorper posuere.
        </p>
    </div>
    <!-- Right Item -->
    <div class="flex flex-col md:w-1/2 text-gray-800 dark:text-gray-200 bg-slate-300 dark:bg-[#101313] rounded-md p-4">
        <h1 class="text-3xl md:text-4xl font-bold md:text-right">Useful Data</h1>
        <p class="max-w-md"></p>
    </div>

</div>

I'm trying to make the second div ( the right item) half of it's initial 100% width.

I've tried using float to float the item to the right, but it's not working. Really, I'm not a CSS guy - Please help me. Thanks.

Answer 1

Maybe you can try that instead of having 2 columns in the main div , you have 4 columns instead. So your first div will start on line 1 and end in line 3 (this class specifies in which line starts and ends col-start-1 col-end-3 ),and your second div will start in line 4 , and end in line 5 your code can look like this:

<div class="grid grid-cols-4">
    <!-- Left Item -->
    <div class=" col-start-1 col-end-3 flex flex-col w-full text-left text-gray-800 dark:text-gray-200 p-4 col-span-2">
        <h1 class="text-3xl md:text-4xl font-bold mb-4">About Project</h1>
        <p class="">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce turpis ante, eleifend vitae turpis ultricies, eleifend ullamcorper ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas, metus id tempor elementum, libero libero consectetur tortor, nec auctor odio purus eget urna. Ut iaculis hendrerit leo in fringilla. Fusce euismod arcu tortor, sed rhoncus quam semper et. Vestibulum facilisis gravida nisi a commodo. Aenean tempus accumsan lectus, eget dapibus felis aliquet vel. Donec aliquet massa quis augue ullamcorper posuere.
        </p>
    </div>
    <!-- Right Item -->
    <div class="col-start-4 col-end-5 text-gray-800 dark:text-gray-200 bg-slate-300 dark:bg-[#101313] rounded-md p-4">
        <h1 class="text-3xl md:text-4xl font-bold md:text-right">Useful Data</h1>
        <p class="max-w-md"></p>
    </div>
</div>