JSFiddle - React, Tailwind, and code Playground

HTML

<html>

<head>
</head>

<body class="dir_rtl">
  <table id="main_search_wrapper">
      <tr>
          <th>
    This should be aligned to the left.
          </th>
          <td>1</td>
          <td>2</td>
      </tr>
  </table>
</body>

</html>

CSS

#main_search_wrapper {
       display: inline-block;
       position: absolute;
       right: 0;
       direction:rtl;
   } 

   tr {
       left: 0;               /* <-- This should override the above style */
       color:red;
   }

   th {
       left: 0;               /* <-- This should override the above style */
       color:blue;
    position: absolute;
   }