dt,dd要素をtableのような横並びのレイアウトにします。
横幅を縮めた際は縦並びに変更しています。

DEMO

見出しタイトル
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
見出しタイトル
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
見出しタイトル見出しタイトル見出しタイトル見出しタイトル見出しタイトル
この文章はダミーです。

HTML

<dl class="item">
	<dt class="item-title">見出しタイトル</dt>
	<dd class="item-text">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</dd>
	<dt class="item-title">見出しタイトル</dt>
	<dd class="item-text">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</dd>
	<dt class="item-title">見出しタイトル見出しタイトル見出しタイトル見出しタイトル見出しタイトル </dt>
	<dd class="item-text">この文章はダミーです。</dd>
</dl>

CSS

.item {
	border: 1px solid #ccc;
	border-top: none;
	display: flex;
	flex-wrap: wrap;
}
.item-title {
	background: #f7f7f7;
	border-top: 1px solid #ccc;
	box-sizing: border-box;
	padding: 10px;
	width: 30%;
}
.item-text {
	background: #fff;
	border-left: 1px solid #ccc;
	border-top: 1px solid #ccc;
	box-sizing: border-box;
	margin: 0;
	padding: 10px;
	width: 70%;
}
@media screen and (max-width: 768px) {
	.item {
		flex-flow: column nowrap;
	}
	.item-title,
	.item-text {
		width: 100%;
	}
	.item-text {
		border-left: none;
	}
}