<div>
  <h2>見出し width:100%指定</h2>
  <ul>
    <li>テキスト width:50%指定</li>
    <li>テキスト width:50%指定</li>
  </ul>
</div>
<!--▼デモ用のボタン▼-->
<p>
  <span>1行表示</span>
  <span>折り返し表示</span>
</p>
<!--▲デモ用のボタン▲-->
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  line-height:300%;
}
/*↑デモ表示用コード↑*/
/*--------------------------*/
div,
ul{
  width:100%;
  background:#ddd;
	display:-webkit-box;
	display:-moz-box;
	display:box;
	display:-webkit-flex;
	display:flex;
}
div{
  padding:1rem;
}
div.nowrap{
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}
div.wrap{
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
/*--------------------------*/
/*↓デモ表示用コード↓*/
div{
  margin-top:3rem;
}
h2,
li{
  background:white;
  list-style:none;
  text-align:center;
  border:1px solid gray;
}
h2,
ul{
  width:100%;
}
li{
  width:50%;
}
span{
  text-decoration:underline;
  margin:0 1rem;
  cursor:pointer;
}
span:hover{
  color:blue;
}
//デモ用のボタン
$(function(){
  $("p span").click(function(){
    $('div').removeClass();
    var spanNo = $('p span').index(this);
    if(spanNo == 0){
      $('div').addClass('nowrap');
    }else if(spanNo == 1){
      $('div').addClass('wrap');
    }
  })
})
Rerun