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

div{
  position:relative;
  width:100%;
  padding-top:60%;
  border:1px solid #bbb;
}
ul{
  position:absolute;
	display:flex;
  flex-direction:column;
  flex-wrap: wrap;
  margin:0;
  padding:0;
  top:0;
  bottom:0;
  left:0;
  right:0;
}
li{
	display:flex;
  flex:1 40%;
  border:1px solid #bbb;
}
li:first-child{
  flex:1 100%;
}