JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<ul class="flex-container">
  <li>국민경제자문회의의 조직·직무범위 기타 필요한 사항은 법률로 정한다.국가는 농·어민과 중소기업의 자조조직을 육성하여야 하며, 그 자율적 활동과 발전을 보장한다.</li>
  <li>국민경제자문회의의 조직·직무범위 기타 필요한 사항은 법률로 정한다.</li>
  <li>국민경제자문회의의 조직·직무범위 기타 필요한 사항은 법률로 정한다.국가는 농·어민과 중소기업의 자조조직을 육성</li>
  <li>국민경제자문회의의 조직·직무범위 기타 필요한 사항은 법률로 정한다.국가는 농·어민과 중소기업의 자조조직을 육성하여야 하며, 그 자율적 활동과 발전을 보장한다.</li>
  <li>국민경제자문회의의 조직</li>
  <li>국민경제자문회의의 조직·직무범위 기타 필요한 사항은 법률로 정한다.국가는 농·어민과 중소기업의 자조조직을 육성하여야 하며, 그 자율적 활동과 발전을 보장한다.</li>
</ul>

CSS

* {
  padding: 0;
  margin: 0;
  list-style: none;
}
.flex-container {width:600px;
    display: flex;
    flex-wrap: wrap;
   /*  align-content: stretch;
    align-items: flex-start; */
    height: 80px;
    background: #ff0000;
    }
 .flex-container li {width:200px;   
    
    background: #eeeeee;
    
 }
.flex-container li:nth-child(even) {   
   background: #e4e4e4;
 }