<div id="wrap">
  <h3> 2개 </h3>
  <ul class="area">
    <li class="item">내용내용</li>
    <li class="item">내용내용</li>
  </ul>

  <h3> 3개 </h3>
  <ul class="area">
    <li class="item">내용내용</li>
    <li class="item">내용내용</li>
    <li class="item">내용내용</li>
  </ul>

  <h3> 4개 </h3>
  <ul class="area">
    <li class="item">내용내용</li>
    <li class="item">내용내용</li>
    <li class="item">내용내용</li>
    <li class="item">내용내용</li>
  </ul>

  <h3> 내용이 긴 경우 </h3>
  <ul class="area">
    <li class="item">내용내용내용내용내용내용</li>
    <li class="item">내용내용내용내용내용내용</li>
    <li class="item">내용내용내용내용내용내용</li>
    <li class="item">내용내용내용내용내용내용</li>
    <li class="item">내용내용내용내용내용내용</li>
    <li class="item">내용내용내용내용내용내용</li>
    <li class="item">내용내용내용내용내용내용</li>
  </ul>
</div>

body {
  margin: 0;
  padding: 10px 0;
  background-color: #E3F2FD;
}

h3 {
  text-align: center;
}

#wrap {
  margin: 0 auto;
  padding: 10px 0;
  width: 700px;
  background-color: #90caf9;
}

.area {
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
  list-style: none;
}

.area:before {
  display: inline-block;
  width: 1px;
  content: '';
}

.area:after {
  display: inline-block;
  width: 1px;
  content: '';
}

.item {
  display: inline-block;
  border: 1px solid #0d48a1;
  background-color: #1565c0;
  color: #fff;
  text-align: center;
  line-height: 30px;
}