JSFiddle - React, Tailwind, and code Playground

HTML

<table id="resource_file_info">
	<thead>
	      <tr>
				<th>A:</th>
	      </tr>
	      <tr>
				<th>B:</th>
	      </tr>
	      <tr>
				<th>C:</th>
	      </tr>
	      <tr>
				<th>D:</th>
	      </tr>
	</thead>
	<tbody>
	    <tr>
			 <td>111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</td>
	    </tr>
	    <tr>
			 <td>I'm with B part</td>
	    </tr>
	    <tr>
			 <td>I'm with C part</td>
	    </tr>
	    <tr>
			<td>I'm with D part</td>
	    </tr>
	</tbody>
</table>

CSS

#resource_file_info	{
	table-layout:fixed;
    
}

thead {
  float: left;   
}

thead th {
  display: block;   
}

tbody {
  float: right;   
}

th, td	{
	padding: 10px 0;
	text-align: center;
	border-collapse: collapse;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break:break-all;
}
th	{
	width: 150px;
}
td	{
	max-width: 450px;
}