JSFiddle - React, Tailwind, and code Playground

by jonfagence

HTML

<div>
    <ul>
        <li>Value 1</li>
        <li>Value 2</li>
        <li class="double-height">Value 3</li>
        <li>Value 4</li>
        <li>Value 5</li>
    </ul>
</div>

<div class="right">
    <ul>
        <li>Value 1</li>
        <li>Value 2</li>
        <li class="double-height">Value 3</li>
        <li>Value 4</li>
        <li>Value 5</li>
    </ul>
</div>

CSS

div{
 position: absolute;
}

ul{
 display: flex;
 flex-direction: column;
 height: 3em;
 flex-wrap: wrap;
}

li{
  display: block;
  padding: 0 10px;
}

li.double-height
{
   height: 3em;
   font-size: 2em;
}

.right{
 right: 0;
 color: red;
}