<div class="container">
<div id="element"></div>
<table>
  <thead>
  <tr>
    <th>property</th>
    <th>size</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>client_top</td>
    <td><span id="client_top"></span>px</td>
  </tr>
  <tr>
    <td>client_left</td>
    <td><span id="client_left"></span>px</td>
  </tr>
  <tr>
    <td>client_height</td>
    <td><span id="client_height"></span>px</td>
  </tr>
  <tr>
    <td>client_width</td>
    <td><span id="client_width"></span>px</td>
  </tr>
  </tbody>
</table>
</div>

.container {
  display: flex;
}

#element {
  margin: 30px;
  border-top: 5px solid red;
  border-left: 10px solid green;
  width: 50px;
  height: 80px;
  background-color: #ccc;
}

table {
  margin-top: 16px;
  border-collapse: collapse;
}

table th, table td {
  border: solid 1px #ccc;
  padding: 4px;
}

const element = document.getElementById('element')
document.getElementById('client_top').textContent = element.clientTop
document.getElementById('client_left').textContent = element.clientLeft
document.getElementById('client_height').textContent = element.clientHeight
document.getElementById('client_width').textContent = element.clientWidth
console.log(element)