tableタグの中で１行ずつ文字を上下に振り分けたい

Question

ワードプレス内で記事を作っています

下記のようなテーブル内で
１行目は上揃え、２行目は下揃えにしたいのですが、どうすれば良いでしょうか。

最初pタグ内でvertical-align: を書いていたのすが、
vertical-alignはテーブルセルとインライン要素でしか使えないとあったので

<div> <div　style="text-align: left; vertical-align: top;"> <div　style="text-align: left; vertical-align:bottom;"> </div> としてみたのですが、変化なかったのでご質問させて頂きました

<table width="auto" height="auto">
<tbody>
  <tr style="text-align: left; vertical-align: top;">
    <td style="width: auto;">
      <img src="images/img_pr.png" alt="" />
    </td>
    <td style="width: auto;">
      <div>

        <p>
          <span>１行目 </span>
        </p>

　　     <p>
          <span>２行目 </span>
        </p>

      </div>
    </td>
  </tr>
</tbody>

よろしくお願いいたします

Answer 1

こんにちは。

サンプル

tr,td{
  height: 100%;
}
div {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  height: 100%;
}
p {
  width: 100%;
}

---

なお、HTMLに全角スペースが混じっていましたので、除去してください。

Answer 2

なぜvertical-align属性が使えるテーブルタグの中でdivタグを使おうとしているのかがよくわからないのですが、display属性でtable-cell要素を使えばdivに対してもテーブル内セルのように振る舞えるので、そうやって対応できる気はします。

td div p:nth-child(1){
   display: table-cell;
   vertical-align: top;
}
td div p:nth-child(2){
   display: table-cell;
   vertical-align: bottom;
}