サムネイルが左、テキストが右の横並びカード。flex-shrink: 0で画像の潰れを防ぎ、長いタイトルは省略記号で丸めます。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
横並びカードの2大トラブルは「画像が潰れる」と「省略記号が効かない」です。前者はサムネイルに flex-shrink: 0、後者はテキスト側の flexアイテムに min-width: 0 を指定して解決します（flexアイテムのmin-widthは初期値autoのため、内容より小さくなれず ellipsis が発動しません）。タイトルの1行省略は overflow / text-overflow / white-space の3点セットです。
カード全体をaで包むと、タップ領域が広く使いやすくなります。中に別のリンクを入れたい場合は構造を見直してください（aの入れ子は不可）。
サムネイル左・テキスト右の横並びメディアカードを作ってください。画像はflex-shrink: 0で固定、テキスト側はmin-width: 0を指定し、長いタイトルはtext-overflow: ellipsisで1行に省略してください。