JSFiddle - React, Tailwind, and code Playground

HTML

<div class='div_table'>
  <div class='div_tr'>
    
    <div class='div_td'>
      title
    </div>
    
    <div class='div_td' style='width:100%; border-top:none;'>
      <div class='div_td'>
       <div style="border-top:dashed; position:relative; top:50%;">          </div>
    </div>              
    </div>
            
    <div class='div_td'>
      content
    </div>
  </div>
</div>

CSS

<style>
    pre {
        white-space: pre;
        border-collapse: collapse;
        padding: 0px 0px 0px 0px;
        border: solid windowtext 0px;
        background-color: white;
        font-size: 10px;
        font-family: Arial;
        text-align: left;
        vertical-align: top;
        margin: 0em 0;
        overflow: hidden;
        overflow-wrap: break-word;
        white-space: pre-wrap;
        word-wrap: break-word;
    }

    div {
        width: 100%;
        overflow-wrap: break-word;
    }

    .div_table {
        display: table;
        width: 100%;
        table-layout: fixed;
        overflow-wrap: break-word;
    }

    .div_tr {
        display: table-row;
    }

    .div_td {
        display: table-cell;
        height: 10px;
        border-collapse: collapse;
        padding: 3px 3px 3px 3px;
        border: solid windowtext 0.5px;
        font-size: 10px;
        font-family: Arial;
        text-align: left;
        vertical-align: top;
    }
</style>