<ul>
  <li>1.サイドバー</li>
  <li>2.本文</li>
</ul>
ul {
  display: flex;
  list-style: none;
  width: 100%;
  padding: 5px;
}

ul li{
  background: #eee;
  border: 1px solid #ccc;
  display: block;
  width: 100%;
  height: 500px;
}

ul li:nth-child(1){
  width:  20%;
}

ul li:nth-child(2){
  width: 80%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.