<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">


<div class="book-introduction-box">
  <section class="book-image">
   <img src="http://gahag.net/img/201608/26s/gahag-0119028908-1.png"/ height="230">
  </section>
  <section class="book-explanation">
   <table class="book-explanation-table">
    <tbody>
      <tr>
        <th class="t_top">タイトル</th>
        <td class="t_top">ライフカクメイ</td>
      </tr>
      <tr>
        <th>ジャンル</th>
        <td>生活</td>
      </tr>
      <tr>
        <th>発売日</th>
        <td>2020年1月1日</td>
      </tr>
        <tr>
        <th>著者</th>
      <td>ライフ カクメイ</td>
      </tr>
      <tr>
        <th>出版社</th>
        <td>ライフカクメイ社</td>
      </tr>
    </tbody>
   </table>
  </section>
</div>
<div class="botton-center">
  <a href="#" class="perchase-button"><i class="fas fa-shopping-cart"> </i>購入する</a>
</div>

 /* 全体のボックス */
@media(min-width:600px){
  .book-introduction-box{
    display: flex;
    display: -webkit-flex;
  }
  .book-image{
    margin: 25px;
  }
  .book-explanation{
    margin: 25px;
  }
  .botton-center{
    padding-left:20px; 
  }
}

.book-explanation-table{
  border-collapse: collapse;
}
th.t_top {
  border-top: #0110c8 4px solid;
  width: 180px;
}
th {
  border-bottom: #e3e3e3 1px solid;
  border-left: #e3e3e3 1px solid; 
  text-align: center;
  padding: 10px;
  font-weight: normal;
}
td.t_top {
  border-top: #b3b3b3 4px solid;
  width: 180px;
}
td {
  border-bottom: #e3e3e3 1px solid;
  border-left: #e3e3e3 1px solid;
  border-right: #e3e3e3 1px solid;
  text-align: left;
  padding: 10px;
}

a.perchase-button {
  margin:20px;
  display: inline-block;
  padding: 7px 20px 7px 20px;
  border-radius: 15px;
  text-decoration: none;
  color: #FFF;
  background-image: -webkit-linear-gradient(45deg, #FFC106 0%, #ff8b5f 100%);
  background-image: linear-gradient(45deg, #FFC106 0%, #ff8b5f 100%);
  transition: .5s;
}
a.perchase-button:hover {
  background-image: -webkit-linear-gradient(45deg, #FFC107 0%, #f76a35 100%);
  background-image: linear-gradient(45deg, #FFC107 0%, #f76a35 100%);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.