<div class="item-wrap">
  <div class="items">
    <div class="item left"> 
      <div class="inner">
        <span>50%</span>
      </div>
    </div>
    <div class="item right">
      <div class="inner">
        <span>50%</span>
      </div>
    </div>
  </div>
</div>

/* 05 */
.item-wrap {
  max-width: 1280px;
  margin: 0 auto;
}
.item-wrap .items { /* 자식들을 감싸고 있는 부모 */
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex; /* flex container를 만들어주는 속성 */
   justify-content: space-between; /* 행 정렬 하는 속성, 영역 간 공백을 만들어주는 속성 */
  height: 200px;
}
.item-wrap .items .item { /* 나란히 배치할 영역 */
  text-align: center;
  width: 50%;
  margin: 0 5px; /* 간격을 위해 준 속성 */
}
.item-wrap .items .item .inner { /* 나란히 배치할 영역 안 텍스트를 감싼 div */
  position: relative;
  background: aliceblue;
  height: 100%;
}
.item-wrap .items .item .inner:before { /* 텍스트를 수직 가운데 정렬하기 위한 가상선택자 */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
}
.item-wrap .items .item .inner span { /* 가상선택자와 나란히 배치하기 위해 준 속성 */
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  word-break: break-all;
}