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>

```
Flexbox is the right approach since it is now supported by all major browsers. This is an alternative approach if you need to target an older browsers or you don't like the drawbacks of floats. With this approach you can control the overflow of the left and right segment better and you can easily add a centered segment if you need one.

CSS:

```
table{
  width: 100%;
}

.container{
  width: 100%;
  display: table;
}

.cell{
  display: table-cell;
}

.cell .left{
  text-align: left;
}

.cell.right{
  text-align: right;
}

```

HTML:

```
<table>
  <tr>
    <td>
      <div class="container">
        <span class="cell left">LEFT</span>
        <span class="cell right">RIGHT</span>
      </div>
    </td>
  </tr>
</table>

```