Как сделать ul в ряд, где li идет под li?

    ul { 
        width: 800px; 
        height: 600px; 
 
        -webkit-column-count: 3; 
        -moz-column-count: 3; 
        column-count: 3; 
    } 
 
    ul li { 
        background-color: rgba(0,0,0,.3); 
        display: inline-block; 
        margin: 5px; 
        width: 100%; 
 
        text-align: center; 
    } 
 
    ul li:before { 
        content: '</li>'; 
        display: inline-block; 
        margin: 50px; 
        color: gray; 
    } 
 
    ul li:nth-child(1) { 
        height: calc(100% - 10px); /* calc(size - 10px) нужен из-за указанных magin 5px (сверху и снизу) */ 
    } 
    ul li:nth-child(2) { 
        height: calc(30% - 10px); 
    } 
    ul li:nth-child(3) { 
        height: calc(70% - 10px); 
    } 
    ul li:nth-child(4) { 
        height: calc(50% - 10px); 
    } 
    ul li:nth-child(5) { 
        height: calc(50% - 10px); 
    }

<ul> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
</ul>

* { 
  box-sizing: border-box; 
} 
 
html, body { 
  height: 100%; 
} 
 
body { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
} 
 
ul { 
  display: block; 
  -webkit-column-count: 3; 
          column-count: 3; 
  -webkit-column-gap: 1rem; 
          column-gap: 1rem; 
  width: 100%; 
  height: 500px; 
} 
ul li { 
  color: rgba(255, 255, 255, 0.5); 
  width: 100%; 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  padding-bottom: 2rem; 
  background-color: black; 
  border-bottom: 1rem solid white; 
} 
ul li:nth-of-type(1) { 
  height: 100%; 
} 
ul li:nth-of-type(2) { 
  height: 40%; 
} 
ul li:nth-of-type(3) { 
  height: 60%; 
} 
ul li:nth-of-type(4) { 
  height: 60%; 
} 
ul li:nth-of-type(5) { 
  height: 40%; 
}

<ul> 
  <li>1</li> 
  <li>2</li> 
  <li>3</li> 
  <li>4</li> 
  <li>5</li> 
</ul>