JSFiddle - React, Tailwind, and code Playground

by Thorske

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
</head>
<body>
<table class="agenda-table">
  <tbody>
    <tr class="agheader">
      <th>Title</th>
    </tr>
    <tr>
      <td class="left">xxx</td>
      <td class="right">
        <h4>yyy</h4>
      </td>
    </tr>
    <tr>
      <td class="left">aaa</td>
      <td class="right">
        <h4>bbb</h4>
      </td>
    </tr>
  </tbody>
</table>

<table class="agenda-table">
  <tbody>
    <tr class="agheader">
      <th>Title</th>
    </tr>
    <tr>
      <td class="left">xxx</td>
      <td class="right">
        <h4>yyy</h4>
      </td>
    </tr>
    <tr>
      <td class="left">aaa</td>
      <td class="right">
        <h4>bbb</h4>
      </td>
    </tr>
  </tbody>
</table>


</body>
</html>

CSS

* {
  margin :0;
  padding :0;
}
.agenda-table {
  margin : 0 auto;
  width : 100%
}
.agheader {
  float : left;
  width : 65%;
  background : #f442bc;
}
th, tr {
  float : left;
  width : 100%;
  text-align : left;
}
.left {
  float : left;
  width : 5%;
  border-right : 1px solid #f442bc;
  }
 .right {
   float : left;
   width : 60%;
   }