Right-align elements on multiple rows

Question

I want to align the li elements to the right side of the div. I am able to do this by floating the ul to the right.

However, I have a lot

Answer 1

How about a simple text-align: right?

.row {
  display: flex;
}

.col-1 {
  flex: 1;
  border: 1px solid red;
}

.col-2 {
  flex: 1;
  border: 1px solid blue;
}

ul#menu {
  text-align: right;
  margin: 0;
  padding: 0;  
}

ul#menu li {
  display: inline;
}

<div class="row">
  <div class="col-1">Lorem ipsum dolor sit amet</div>
  <div class="col-2">
    <ul id="menu">
      <li>menu 01</li>
      <li>menu 02</li>
      <li>menu 03</li>
      <li>menu 04</li>
      <li>menu 05</li>
      <li>menu 06</li>
      <li>menu 07</li>
      <li>menu 08</li>
    </ul>
  </div>
</div>