JSFiddle - React, Tailwind, and code Playground

by jasonleonhard

HTML

<div class="list_container">
      <div id="item_direction">1</div>
      <div id="item_direction">2</div>
      <div id="item_direction">3</div>
      <div id="item_direction">4</div>
      <div id="item_direction">5</div>
      <div id="item_direction">6</div>
      <div id="item_direction">7</div>
      <div id="item_direction">8</div>
      <div id="item_direction">9</div>
      <div id="item_direction">10</div>
      <div id="item_direction">11</div>
      <div id="item_direction">12</div>
    </div>

CSS

.list_container {
  direction: rtl;
  overflow:auto;
  height: 50px;
  width: 50px;
}

/* optionally add id="item_direction to each item to change the direction of the text flow back, while preserving the container direction */
#item_direction {
  direction:ltr;
}