<head>
  <title>flexheight</title>
</head>
<body>
  <div class="wrap">
    <p id="modoru">ここに戻る予定</p>
   <ul>
    <li class="return"><a href="#modoru"></a></li>
    <li class="line"><a href="#">LINE</a></li>
    <li><a href="#">問い合わせ</a></li>
   </ul>
  </div>
</body>
#modoru{
  margin-bottom: 500px;
  background: #000;
  color: #fff;
  text-align: center;
}
.wrap{
  width: 300px;
  margin: 0 auto;
}

ul{
  width: 100%;
  list-style:none;
  display: flex;
  justify-content: space-around;
  padding-left: 0;
}

li{
  text-align:center;
  width: 30%;
  background: #999;
}

a{
  width: 100%;
  height: 100%;
  display:block;
  color: #fff;
  text-decoration:none;
  line-height:30px;
}

.line{
  background: #1dcd00;
}

.return{
  cursor: pointer;
  background:#dfdfdf url('http://life-thewild.com/wp-content/uploads/2017/04/icon-157358_640.png') no-repeat center;
  background-size: 20px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.