CODEWITHSUNDEEP
javascripthtmlreactjstailwind-css
ZPaulB
ZPaulB

Reputation: 47

My tailwindcss is not working as I want i.e my Text2 is not well placed

I want to put my text : Text2 on the total right side. My Text1 is well placed. What do I have to change please ? With what I have, my Text2 is next to Text1

    <div className="w-screen h-screen flex">
        ...
        <div className="flex-1 h-full flex flex-col">
            ...
            <div className="flex-1 flex flex-col bg-primary-500/5 dark:bg-red-400 overflow-y-auto">
                ...
                <div className="shrink-0 h-10 text-sm text-gray-700 bg-white dark:bg-slate-900 px-5 flex items-center">
                    Text1
                    <div className='flex-1'>
                        Text2
                    </div>
                </div>
            </div>
        </div>
    </div>

Upvotes: 0

Views: 52

Answers (1)

Anton
Anton

Reputation: 8508

Try this example. I added two properties to the Text2 to offset to the right side.

<div class="flex-1 flex justify-end">Text2</div>


<script src="https://cdn.tailwindcss.com"></script>
<div class="w-screen h-screen flex">
  ...
  <div class="flex-1 h-full flex flex-col">
    ...
    <div class="flex-1 flex flex-col bg-primary-500/5 dark:bg-red-400 overflow-y-auto">
      ...
      <div class="shrink-0 h-10 text-sm text-gray-700 bg-white dark:bg-slate-900 px-5 flex items-center text-white">
        Text1
        <div class="flex-1 flex justify-end">Text2</div>
      </div>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions