JSFiddle - React, Tailwind, and code Playground

by waqasahmad724

HTML

<table>
  <tbody>
    <tr>
      <td class="first" title="First Name">John</td>
      <td class="last" title="Last Name">Dave</td>
      <td class="gender" title="Gender">
        <div>
          <p>first gender</p>
          <p>break point</p>
          <p>last gender</p>
        </div>
      </td>
    </tr>
  </tbody>
</table>

CSS

table {
	border-collapse: collapse;
	width: 100%;
}
td {
	display: block;
}
td.first:before {
	content: "First Name";
	width: 200px;
	display: inline-block;
}
td.last:before {
	content: "Last Name";
	width: 200px;
	display: inline-block;
}
td.gender {
	display: flex;
	flex-direction: row;
}
td.gender:before {
	content: "Gender";
	width: 200px;
}
td.gender div p {
	margin: 0;
}