How to list a ul li from the right to the left

I'm using Bootstrap Vue to create a layout like this:

How can I list the part in the red block from the right to the left using ul, li? I have tried align-items but it doesn't work.

This is my current screen:

<hr>

Here is my code:

          <b-card class="book-room" style="height:85px">
            <b-row>
              <b-col cols="5" style="justify-content: left">
                <ul style="list-style: none; margin-left: -45px; margin-top:-10px">
                  <li style="font-size: 10px; color: #b5b5c3">NHẬN PHÒNG</li>
                  <li style="font-weight: 700; font-size: 16px; color: #111827">
                    22/10/2022
                  </li>
                  <li style="font-size: 12px; color: #6b7280">12:00</li>
                </ul>
              </b-col>

              <b-col cols="2" class="col-moon">
                <!-- icon -->
                <b-icon icon="moon"></b-icon>2
              </b-col>

              <b-col cols="5" style="justify-content: right">
                <ul style="list-style: none; margin-left: 26px; margin-top:-10px;">
                  <li style="font-size: 10px; color: #b5b5c3;">TRẢ PHÒNG</li>
                  <li style="font-weight: 700; font-size: 16px; color: #111827">
                    24/10/2022
                  </li>
                  <li style="font-size: 12px; color: #6b7280">23:59</li>
                </ul>
              </b-col>
            </b-row>
          </b-card>

Thank you!

The easiest method for this is just to use text-align: right;. It will align the text to the right, which is understandable already when reading it.

Here's an example which will help:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

ul {
  /* Just to show the box */
  width: 100px;
  border: 1px solid;
  /* Till here */
  
  text-align: right;
}

<!-- language: lang-html -->

<ul>
  <li>Just</li>
  <li>A</li>
  <li>Random</li>
  <li>Text</li>
</ul>

<!-- end snippet -->