How to align Chat Messages based on 'sent' status?

[happybeginning1]

Question

Hi everyone,

I have the following example code for chat messages using NiceGUI:

from nicegui import ui

ui.chat_message('I am the first box')
ui.chat_message('I am the second box', sent=True)
ui.chat_message('I am the third box')
ui.chat_message('I am the fourth box', sent=True)
ui.chat_message('I am the fifth box')

ui.run()

I would like to achieve the following:
If sent=False, the chat message should be aligned to the left side of the screen.
If sent=True, the chat message should be aligned to the right side of the screen.

Could someone please guide me on how to set this up? Thank you!

[python-and-fiction]

from nicegui import ui
with ui.element('div').classes('w-full'):
    ui.chat_message('I am the first box')
    ui.chat_message('I am the second box', sent=True)
ui.run()

[happybeginning1]

Thanks @python-and-fiction, it works perfectly!