JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
  </ul>
</div>

CSS

ul{
	display:flex;
  flex-direction:column;
  flex-wrap: wrap;
  margin:0;
  padding:0;
  width:100%;
  height:50vW;
}
li{
	display:flex;
  flex:1 40%;
  border:1px solid #bbb;
}
li:first-child{
  flex:1 100%;
}