Question: Whats the best way to split up a table element `<td>`? I don't really want to use nested tables. I need the internal element to have two elements one that is left justified and the other to be right justified with no border.

For example:

```
<table>
<tr>
<td>LEFT, RIGHT</td>
</tr>
</table>

```

any other ways to do this besides the following?

```
<table>
<tr>
<td>LEFT</td>
<td>RIGHT</td>
</tr>
</table>

```

I want the internal element to be a `<span>` or whatever is best for this.

Answer: 
```
<table>
   <tr>
      <td>
         <div style="float:left">LEFT</div><div style="float:right">RIGHT</div>
      </td>
   </tr>
</table>

```
The floats didn't seem to look right so I used flexbox:

<https://jsfiddle.net/6rc8w709/>

```
.td-content{
  display:flex;
}
.child{
  flex:1;
}
.right{
  text-align:right;
}

```

HTML:

```
<table>
  <tr>
    <td>
      <div class="td-content">
        <div class="child">
          LEFT
        </div>
        <div class="child right">
          RIGHT
        </div>
      </div>
    </td>
  </tr>
</table>

```