JSFiddle - React, Tailwind, and code Playground

by Zer00ne Null

HTML

<section>
  <ul>
    <li>first child</li>
    <li>second element with extra long text</li>
    <li>3rd element</li>
  </ul>
  <ul>
    <li>4th</li>
    <li>5th element</li>
    <li>6th element</li>
  </ul>


</section>

CSS

section {
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
}

ul {
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
  flex: 1 0 auto;
  padding: 0;
  margin: 0 auto;
}

li {
  background-color: #f00;
  list-style: none;
  padding: 5px;
  margin: 1px;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
}