JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bar">
    <div class="numbers">twelve</div>
    <div class="numbers">eleven</div>
    <div class="numbers">ten</div>
    <div class="numbers">nine</div>
    <div class="numbers">eight</div>
    <div class="numbers">seven</div>
    <div class="numbers">six</div>
    <div class="numbers">five</div>
    <div class="numbers">four</div>
    <div class="numbers">three</div>
    <div class="numbers">two</div>
    <div class="numbers">one</div>
</div>

CSS

.bar
{
  height: 20px;
  overflow: hidden;
  float: left;
}

.bar>div:hover
{
  cursor: pointer;
  color: white;
}
.numbers
{
  float: right;
  background-color: yellow;
  width: 50px;
}