JSFiddle - React, Tailwind, and code Playground

by Kamil

HTML

<div class="container">
  <table>
    <tr>
      <td>Title One</td>
      <td class="two">
        <p>Title Two</p>
      </td>
    </tr>
    <tr>
      <td class="one">Lorem</td>
      <td class="two">
        <button>Edit</button>
        <button>Delete</button>
      </td>
    </tr>
  </table>
</div>

CSS

.container {
  width: 600px;
}

table {
  width: 100%;
}

td {
  border: 1px solid red;
  border-collapse: separate;
}

.one {
  width: 75%;
}

.two {
  width: 25%;
  text-align: right;
}

.two button:first-child{
  margin-left: 20px;
}

.two button:last-child {
  margin-right: 17px;
}