Как сверстать кнопку как на картинке

<button style=" 
    float: left; 
    font-size: 20px; 
    padding-right: 10px; 
    margin-top: 4px; 
"> 
Предыдущий 
<div style="float: right;font-size: 13px;"> 
<div style=" 
    border-bottom: 1px solid #000; 
">2016</div> 
<div>2017</div> 
</div> 
</button>

* { 
  margin: 0; 
  padding: 0; 
} 
 
.flex { 
  display: flex; 
  width: 190px; 
  height: 60px; 
  align-items: center; 
  overflow: hidden; 
  border: 1px solid #ccc; 
  justify-content: center; 
  background: linear-gradient(#fdfdfd, #ddd); 
  margin: 20px; 
} 
 
.flex:hover { 
  background: linear-gradient(#ddd, #fdfdfd); 
} 
 
.eyar { 
  padding: 6px; 
} 
 
.eyar p{ 
 font-size:16px; 
 line-height:16px; 
 font-weight:550; 
} 
 
.eyar p:nth-of-type(1) { 
  border-bottom: 1px solid #555; 
  padding-bottom: 4px; 
}

<div class="flex" tabindex="-1"> 
  <p>Следующий</p> 
  <div class="eyar"> 
    <p>2017</p> 
    <p>2018</p> 
  </div> 
</div>