JSFiddle - React, Tailwind, and code Playground

by sol_b

HTML

<ul>
  <li style="float:left;">Text 1</li>
  <li style="float:left;">Text 2</li>
  <li style="float:right;">Text 3</li>
  <li style="float:right;">Text 4</li>
  <li style="float:right;">Text 5</li>
  <li style="float:right;">Text 6</li>
</ul>

CSS

ul {
  width: 180px;
  background: red;
  display: block;
  float: left;
  padding: 1rem;
  list-style: none;
}

ul li[style="float:left;"] {
  clear: left;

  margin-right: 20px;
}

ul li[style="float:right;"] {
  float: none !important;
  padding-left: 100px;
}