<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>
/* 全体のボックス */
@media(min-width:600px){
.book-introduction-box{
  display: flex;
  display: -webkit-flex;
}

.book-image{
  margin: 25px;
}

.book-explanation{
  margin: 25px;
}
}

.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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.