JSFiddle - React, Tailwind, and code Playground

by web designer

HTML

<table class="mytable">
    <tr>
        <td>
            <div class="number">01</div>
            <div class="content"><span>Some extra extra extra long content</span></div>
        </td>
        <td>
            <div class="number"><span>02</span></div>
            <div class="content"><span>Content</span></div>
        </td>
        <td>
            <div class="number"><span>03</span></div>
            <div class="content"><span>Content</span></div>
        </td>
    </tr>
</table>

CSS

.mytable td {
  background-color: #276;
  color: #000;
  padding: 0.5em;
  width: 10%;
  font-size: 1.5em;
  vertical-align: middle;
  height: 50px;
    
}
.content {
  margin-left: 40px;
  vertical-align: middle;
}
.number {
  float: left;
  vertical-align: middle;
}
td:first-child .number{
    line-height:50px;
}