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

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>

CodePudding user response：

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

<div >Text2</div>

<script src="https://cdn.tailwindcss.com"></script>
<div >
  ...
  <div >
    ...
    <div >
      ...
      <div >
        Text1
        <div >Text2</div>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

Do you want to move the text2 to the right? like this:

<div>Text1</div>
<div class='text-right'>Text2</div>