table要素内で文字の改行が入るとtd要素がずれてしまいます。

Question

四角の下に文字が書かれた要素を横並びに作ろうとしています。
table要素内で文字の改行が入るとtd要素がずれてしまいます。
文字の改行が入っても隣の要素をずれないようにするにはどうすればよいですか？

<style>
    .box{
        width:100px;
        height:100px;
        background-color: skyblue;
    }
    table{
        display:inline-block;
    }
    .space{
        width:20px;
        height:100px;
    }
    p{
        width:100px;
    }

</style>
<table border="0">
    <td><div class="box"></div><p>長い文字が入ります。</p></td>
    <td><div class="space"></div></td>
    <td><div class="box"></div><p>test</p></td>
</table>

table要素を使わずにすべてdiv要素でも 四角の下に文字が書かれた要素　を横並びにしてみたのですが、それでもやはり同じ現象（文字の改行が入ると隣の要素がずれる）が起きてしまいました。

<style>
    .parent{
        display: inline-block;
        color:green;
    }
    .child{
        background-color: yellowgreen;
        width: 100px;
        height: 100px;
    }
    p{
        width: 100px;
    }
</style>

<div class="parent">
    <div class="child">
    </div>
    <p>
    長い文字が入ります。２
    </p>
</div>

<div class="parent">
    <div class="child">
    </div>
    <p>
    test２
    </p>
</div>

int32_tさんの回答のおかげで無事解決しました！
解決方法はずれた四角の要素に vertical-align: top; を追加することで解決しました。
↓table要素を使った方

    td{
        vertical-align: top;
    }

↓すべてdivで作った方

    .parent{
        display: inline-block;
        color:green;
        vertical-align: top;
    }

Answer 1

<td>はコンテンツをセンタリングするのがデフォルトなので、コンテンツの高さが異なるとそのようになります。

td {
  vertical-align: top;
}

などでコンテンツを上に揃えるとよいです。

Comments

[9nahito]

回答ありがとうございます！とても率直な回答で非常にわかりやすかったです！
無事動作しました。
vertical-align って今調べたのですが、垂直方向に揃える という意味だそうです。
助かりました！