flexボックスでコンテンツを2つ並べる！

cssに、flexのあれこれを記述して、HTMLでクラス名を書くだけ！

/* css */
.df{
	display: flex;
}.justify-between{
	justify-content	: space-between;
}.align-center{
	align-items: center;
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px){
	.sp-db {
		display: block !important;
	}.sp-wf{
		width: 100% !important;
	}.sp-vac{
		margin: 0 auto !important;
	}.sp-tac{
		text-align: center;
	}
}

/* HTML */
<div class="df align-center sp-db justify-between">

	<div class="sp-wf">
		<img width="150" src="images/img.jpg" alt="imgの説明">
	</div>

	<div class="sp-vac sp-wf sp-tac">
		<p>右側のテキスト。</p>
	</div>

</div>

.sp-dbとか.sp-wfとか入れておけばレスポンシブ対応できて便利です。

右側のテキスト。

flexボックスは、まだよく理解できていませんが、いろいろ試してみて動作確認して表示がおかしくなければヨシ。
つづく。