JSFiddle - React, Tailwind, and code Playground

by Anderson Carlos Woss

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<!-- /Imports -->

<table class="table-borderless" style="width: 100%">
  <tbody>
    <tr>
      <td style="width: 50%"><span>Conteúdo 1</span></td>
      <td style="width: 50%">Valor</td>
    </tr>
    <tr>
      <td style="width: 50%"><span>Conteúdo 2</span></td>
      <td style="width: 50%">Valor</td>
    </tr>
  </tbody>
</table>

CSS

table { border-collapse: collapse; }
table td { padding: 6px 12px; border: 1px solid #000; }

tr td:first-child { position: relative; }

td {
  line-height: 100px;
}

tr td:first-child::before {
  position: absolute;
  content: "";
  left: 20px;
  top: 50%;
  margin-top: 0px; /* Fine tuning */
  width: calc(100% - 20px);
  height: 1px;
  background-color: gray;
  z-index: -1;
}

td span{
   background: white;
   padding-right: 10px;
}