как поменять положение двух элементов внутри ul -> li

Question

Я использую библиотеку ng-multiselect-dropdown для создания выпадающего меню с несколькими вариантами выбора (флажок и метка).Все отлично работает, как показано на рисунке.

<div>
<ul class="item2" style="max-height: 197px;">
    <li class="multiselect-item-checkbox ng-star-inserted" style="">
        <input aria-label="multiselect-item" type="checkbox">
        <div>test3</div>
    </li>
    <li class="multiselect-item-checkbox ng-star-inserted" style="">
        <input aria-label="multiselect-item" type="checkbox">
        <div>test1</div>
    </li>
</ul>
</div>

Мне нужно повернуть элементы в режиме RTL.Я пытался добавить свойства, такие как: direction="rtl";, display: flex;, flex-direction: row-reverse;, flex-wrap: wrap;

Но мне не удалось изменить элементы.

Короче говоря, я пытаюсь добиться следующего:

Большое спасибо заранее.

Answer 1

Вот jsbin: https://jsbin.com/hijagigave/1/edit?html,css,output

Кажется, он работает с flex-direction: row; на li, если я явно установил атрибут dir на предке.

.multiselect-item-checkbox {
  display: flex;
  flex-direction: row;
}

Answer 2

Я бы использовал display: flex; и flex-direction: column-reverse; - они находятся в столбце / друг под другом ...