JSFiddle - React, Tailwind, and code Playground

HTML

<table>
  <tr>
    <th></th>
    <th>Normal:</th>
    <th>Hanging:</th>
  </tr>
  <tr>
    <th>IE7 or worse (simulated):</th>
    <td>
      <ul class="ul-dash">
        <li>Aaa a aaaa a aaaaa aaaaaaaaa aa aaaaaa aaaaa aaa aaaaa aaaaaaaa</li>
        <li>Aaa a aaaa a aaaaa aaaaaaaaa aa aaaaaa aaaaa aaa aaaaa aaaaaaaa</li>
      </ul>
    </td>
    <td>
      <ul class="ul-dash hanging">
        <li>Aaa a aaaa a aaaaa aaaaaaaaa aa aaaaaa aaaaa aaa aaaaa aaaaaaaa</li>
        <li>Aaa a aaaa a aaaaa aaaaaaaaa aa aaaaaa aaaaa aaa aaaaa aaaaaaaa</li>
      </ul>
    </td>
  </tr>
  <tr class="generatedcontent">
    <th>IE8 and better browsers:</th>
    <td>
      <ul class="ul-dash">
        <li>Aaa a aaaa a aaaaa aaaaaaaaa aa aaaaaa aaaaa aaa aaaaa aaaaaaaa</li>
        <li>Aaa a aaaa a aaaaa aaaaaaaaa aa aaaaaa aaaaa aaa aaaaa aaaaaaaa</li>
      </ul>
    </td>
    <td>
      <ul class="ul-dash hanging">
        <li>Aaa a aaaa a aaaaa aaaaaaaaa aa aaaaaa aaaaa aaa aaaaa aaaaaaaa</li>
        <li>Aaa a aaaa a aaaaa aaaaaaaaa aa aaaaaa aaaaa aaa aaaaa aaaaaaaa</li>
      </ul>
    </td>
  </tr>
</table>

CSS

td, th { font: 2
0px serif; }
table { border-collapse: collapse; }
td, th { padding: 0; border: 1px solid #AAA; }
th { background: #EEE; }

.ul-dash {
  margin: 0;
}

.ul-dash {
  margin-left: 0em;
  padding-left: 1.5em;
}

.ul-dash.hanging li {
  padding-left: 1em;
  text-indent: -1em;
}  

.generatedcontent .ul-dash {
  list-style: none;
}
.generatedcontent .ul-dash > li:before {
  content: "–";
  text-indent: 0;
  display: inline-block;
  width: 0;
  position: relative;
  left: -1.5em;
}