I'm trying to put 'read more' arrow on third column, and it should expand text in first column.
Here's my code, working good outside of table but in table not.
Where's my mistake? I don't want to use jQ or JS.

```css
.read-more-state {
  display: none;
}

.read-more-target {
  opacity: 0;
  display: none;
}

.read-more-state:checked ~ .read-more-wrap .read-more-target {
  opacity: 1;
  display: block;
}

.read-more-state ~ .read-more-trigger:before {
  width: 0;
  height: 0;
  border-top: .6rem solid red;
  border-right: .6rem solid transparent;
  border-left: .6rem solid transparent;
  display: inline-block;
  content: '';
}

.read-more-state:checked ~ .read-more-trigger:before {
  transform: rotate(180deg);
}

.read-more-trigger {
  cursor: pointer;
  display: inline-block;
}

td {
  border:1px solid black;
}
```

```html
<article>
    <h4>Lorem ipsum</h4>
    <input type="checkbox" class="read-more-state" id="post-1" />
    <div class="read-more-wrap">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim doloremque voluptate maiores fugiat nam ab dolorum magni eos libero laudantium, eum cupiditate atque repellendus debitis quisquam blanditiis, quis modi aliquid?</p>
        <span class="read-more-target" id="post-1">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis architecto quia modi. Optio ducimus amet aliquam, recusandae ad, cupiditate harum minima sint repellat tenetur dolores, soluta quidem est veniam reprehenderit?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id iusto ratione error blanditiis non, commodi sequi. Quas, id. Atque harum hic quia totam qui laborum. Molestias laborum, tempora ratione aperiam.</p>
        </span>
    </div>
    <label for="post-1" class="read-more-trigger"></label>
</article>

<hr>

<table>
    <tr>
        <input type="checkbox" class="read-more-state" id="post-2" />
        <td class="read-more-wrap">Lorem ipsum dolor sit amet.
            <p class="read-more-target" id="post-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium, aperiam aut eaque eos esse fugit id, illo impedit ipsa iure mollitia natus.</p>
        </td>
        <td>100 pts</td>
        <td><label for="post-2" class="read-more-trigger">???</label></td>
    </tr>
</table>
```