縦に中央揃えで高さの違う要素を横並びで表示

横に並べるのに float をよく使いますが、今回作る縦の位置を中央揃えできないため使用しません。
inline-block と flex を使って説明します。どちらを使っても同じものが作れます。

inline-blockを使う場合

HTML

<div class="sample01">
	<div class="sample01-box01">サンプル１</div>
	<div class="sample01-box02">高さの違う要素を横並びで表示<br />高さの違う要素を横並びで表示<br />高さの違う要素を横並びで表示<br />高さの違う要素を横並びで表示</div>
	<div class="sample01-box02">高さの違う要素を横並びで表示<br />高さの違う要素を横並びで表示<br />高さの違う要素を横並びで表示</div>
</div>

CSS

.sample01 {
	display: table;
}
.sample01-box01 {
	padding: 16px;
	margin: 0 16px 0 0;	/* 右に16pxの余白を作る */
	text-align: center;
	border: 2px solid #0f0;
	display: inline-block;
	vertical-align: middle; /* 縦に中央合わせ */
}
.sample01-box02 {
	margin: 0 16px 0 0;	/* 右に16pxの余白を作る */
	padding: 8px;
	border: 2px solid #0ff;
	display: inline-block;
	vertical-align: middle; /* 縦に中央合わせ */
}

それぞれの要素に vertical-align に middle をセットすることで、縦に中央揃えにすることができます。
sample01に displayに table をセットしているのは、自動的に入る隙間を消すためです。

vertical-align: top で、上に揃えられ、また vertical-align: bottom をセットすると下に揃えることができます。

flexboxを使う場合

flexを使った例は、inline-blockと同じ要素のサイズや余白のものを作成しました。

HTML

<div class="sample02">
	<div class="sample02-box01">サンプル２</div>
	<div class="sample02-box02">高さの違う要素を横並びで表示<br />高さの違う要素を横並びで表示<br />高さの違う要素を横並びで表示<br />高さの違う要素を横並びで表示</div>
	<div class="sample02-box02">高さの違う要素を横並びで表示<br />高さの違う要素を横並びで表示<br />高さの違う要素を横並びで表示</div>
</div>

CSS

.sample02 {
	display: flex;
	align-items: center;	/* 縦に中央合わせ */
	gap: 16px;		/* 要素間の余白16px */
}
.sample02-box01 {
	padding: 16px;
	text-align: center;
	border: 2px solid #0f0;
}
.sample02-box02 {
	padding: 8px;
	border: 2px solid #0ff;
}

親要素の align-items に center をセットすることで子要素を縦に中央揃えにすることができます。
親要素の gap で子要素の余白を設定しますので、子要素では margin の設定は必要ありません。
flexbox の方が inline-block で設定するよりもスッキリします。

align-items: start で、上に揃えられ、また align-items: end をセットすると下に揃えることができます。