横並びのカラム内で画像の高さを基準にして合わせたい

質問

お疲れ様です。
横並びのアルバムについて質問です。columnボックスに見出し＜ｈ４＞と画像、説明文の＜ｐ＞が入っています。見出しの文字数と説明文の長さは一定ではないので、column内の要素の位置がそれぞれ違います。
これを画像の頭部分で高さを揃えることはｃｓｓだけで実現できるでしょうか。

見出しと説明文どちらかがなければcolumnにinline-blockを指定してあげればよいのですが。
お知恵を貸していただければと思います。
※画像の大きさは一定です。

<div class="column4">
<div class="column">
<h4>■ダミーテキスト</h4>
<div class="image"><img src=".img" alt=""></div>
<div class="text"><p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p></div>
</div>
<div class="column">
<h4>■ダミーテキスト</h4>
<div class="image"><img src=".img" alt=""></div>
<div class="text"><p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p></div>
</div>
<div class="column">
<h4>■ダミーテキスト</h4>
<div class="image"><img src=".img" alt=""></div>
<div class="text"><p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p></div>
</div>
<div class="column">
<h4>■ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</h4>
<div class="image"><img src=".img" alt=""></div>
<div class="text"><p>ダミーテキスト</p></div>
</div>
</div>

回答No.2

amaryllis_watch · ベストアンサー

display: inline-block;にすると、下を基準に横並びしてしまうため、画像を水平できません。
上を基準に横並びするには、display: flex;にすれば、良いですが、見出しに2行以上あると“杭は打たれる”みたいに1つだけ下にズレるので、htmlに見出しと画像とテキストの3つのブロックにする必要があります。

そこで一応、作ってみました。
https://thimbleprojects.org/yoyama1208/333831

お礼

乱雑な質問内容をご理解・回答いただきありがとうございます。

例に出して頂いたように、テーブルレイアウトにすれば実現できるのですが、レスポンシブル対応でスマホ画面だとcolumnブロックごとに縦並びにしたかったので（文章不足してました）、このhtml構成にしています。
いろいろやりましたが、諦めてjsで制御することにしました。ソースまで作っていただきありがとうございます。そして見出しを画像の下にしてもらえないかデザイナーに交渉してみます。

※ところでこのthimbleというの良いですね。

回答No.1

amaryllis_watch

htmlだけじゃ、分からないよ。
CSSはどのような内容になっていますか？

CSSも掲示して下さい。

お礼

ありがとうございます。
画面のCSSは1行でできるので載せていませんでした。
おそらく構造上CSSだけで実現できないのがわかりました。