JSFiddle - React, Tailwind, and code Playground
HTML
<table border='1'>
<tr>
<td>title</td>
<td style='width:100%'>something here...</td>
<td>content</td>
<tr>
</table>
<div class='div_table'>
<div class='div_table'>
<div class='div_tr'>
<div class='div_td' style='border-right:none;border-top:none;'>
title
</div>
<div class='div_td' style='width:100%;'>
something here...
</div>
<div class='div_td' style='border-left:none;border-top:none;'>
content
</div>
</div>
</div>
CSS
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;
}