Issue with styling table - html and css

Question

I have problems with styling my table. I can't understand how I have to build it properly with the text from the right side and my borders are wider and I can't fix their width. The table should look like the picture below.

* {
  margin: 0px;
  padding: 0px;
  outline: 0;
  box-sizing: border-box;
}
body {
  font-family: "Trebuchet MS", sans-serif;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.667;
  color: #494949;
}
table {
  width: 701px;
  margin: 0 auto;
  padding: 30px 0px;
  border-collapse: collapse;
}
thead tr {
  color: #494949;
  line-height: 21px;
  font-weight: bold;
  border-bottom: 1px solid #9d9d9d;
}
tbody tr td {
  color: #494949;
  font-weight: normal;
  position: relative;
  text-align: center;
  border-bottom: 1px solid #9d9d9d;
}

<table>
  <thead>
    <tr>
      <th>Year</th>
      <th>Quantity</th>
      <th>Percentage</th>
      <th>Summary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1980</td>
      <td>321</td>
      <td>45&percnt;</td>
      <td>32</td>
    </tr>
    <tr>
      <td>1981</td>
      <td>221</td>
      <td>41&percnt;</td>
      <td>31</td>
    </tr>
    <tr>
      <td>1982</td>
      <td>131</td>
      <td>42&percnt;</td>
      <td>11</td>
    </tr>
    <tr>
      <td>1983</td>
      <td>121</td>
      <td>44&percnt;</td>
      <td>11</td>
    </tr>
    <tr>
      <td>1984</td>
      <td>151</td>
      <td>41&percnt;</td>
      <td>11</td>
    </tr>
    <tr>
      <td>1986</td>
      <td>171</td>
      <td>71&percnt;</td>
      <td>11</td>
    </tr>
  </tbody>
</table>

Answer 1

Brother a good table example you can find in the following url http://www.indianmedicalholiday.com/cost-comparasion.php

Just Inspect it and copy the css rules.Hope will enjoy it! Thanks.

Answer 2

I just create row-one div which hold the table and text div. And add css to .row-one{display:inline-flex;} for make side by side. And set the table width 50% and .text width 50%. You can set width different. Any question ask me in comment. Thanks. LiveOnFiddle

body {
  font-family: "Trebuchet MS", sans-serif;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.667;
  color: #494949;
}

.row-one {
  display: inline-flex;
}

.text {
  width: 50%;
  margin-left: 1%;
  margin-top: 2%;
}

table {
  width: 50%;
  padding: 30px 0px;
  border-collapse: collapse;
}

thead tr {
  color: #494949;
  line-height: 21px;
  font-weight: bold;
  border-bottom: 1px solid #9d9d9d;
}

tbody tr td {
  color: #494949;
  font-weight: normal;
  position: relative;
  text-align: center;
  border-bottom: 1px solid #9d9d9d;
}

<div class="row-one">
<table>
<thead>
  <tr>
    <th>Year</th>
    <th>Quantity</th>
    <th>Percentage</th>
    <th>Summary</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>1980</td>
    <td>321</td>
    <td>45&percnt;</td>
    <td>32</td>
  </tr>
  <tr>
    <td>1981</td>
    <td>221</td>
    <td>41&percnt;</td>
    <td>31</td>
  </tr>
  <tr>
    <td>1982</td>
    <td>131</td>
    <td>42&percnt;</td>
    <td>11</td>
  </tr>
  <tr>
    <td>1983</td>
    <td>121</td>
    <td>44&percnt;</td>
    <td>11</td>
  </tr>
  <tr>
    <td>1984</td>
    <td>151</td>
    <td>41&percnt;</td>
    <td>11</td>
  </tr>
  <tr>
    <td>1986</td>
    <td>171</td>
    <td>71&percnt;</td>
    <td>11</td>
  </tr>
</tbody>
  </table>

  <div class="text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
  </div>
</div>