Question: How can I add text at the top right corner of a table cell without interfering with the existing text content of the cell?

For example, I have a simple HTML table:

```
<table>
<tr>
  <td>Abc</td>
  <td>Defg</td>
</tr>
<tr>
  <td>Hijkl</td>
  <td>Mno</td>
</tr>
</table>

```

It looks like this:
[![enter image description here](https://i.stack.imgur.com/pxkzm.png)](https://i.stack.imgur.com/pxkzm.png)

How can I add a short (one or two word) "label" to the top right corner of a cell such that the table looks like this?
[![enter image description here](https://i.stack.imgur.com/5Rir6.png)](https://i.stack.imgur.com/5Rir6.png)

Answer: 
Put a div inside the td, make it position relative. Add that label as span/div or whatever element, make it absolute with `top: 0, right: 0`
```
<table>
<tr>
  <td>Abc</td>
  <td>Defg<span> some label </span></td>
</tr>
<tr>
  <td>Hijkl</td>
  <td>Defg<span> some label </span></td>
</tr>
</table>

table {
  border:1px solid black;
}

td {
  width: 200px;
  height: 50px;
  border:1px solid gray;
  position: relative; 
}

td span {
  position: absolute; 
  right: 0;
  top: 0;
  background: gray;
}

```

Fiddle: <https://jsfiddle.net/ykor79mL/>