<ul class="example">
	<li>
		<figure><img src="https://www.ameamelog.com/wp/wp-content/uploads/2019/08/flex-direction_dummy.png" alt=""></figure>
		<div class="txt">
			<h1>タイトルタイトル</h1>
			<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
		</div>
	</li>
	<li>
		<figure><img src="https://www.ameamelog.com/wp/wp-content/uploads/2019/08/flex-direction_dummy.png" alt=""></figure>
		<div class="txt">
			<h1>タイトルタイトル</h1>
			<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
		</div>
	</li>
	<li>
		<figure><img src="https://www.ameamelog.com/wp/wp-content/uploads/2019/08/flex-direction_dummy.png" alt=""></figure>
		<div class="txt">
			<h1>タイトルタイトル</h1>
			<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
		</div>
	</li>
</ul>
ul {
	padding: 0;
}
ul li {
	list-style-type: none;
}
figure {
	margin: 0;
}
img {
	vertical-align: bottom;
}
h1 {
	font-size: 24px;
}
.example {
	width: 800px;
}
.example li {
	display: flex;
}
.example li:nth-child(even) {
	flex-direction: row-reverse;
}
.example li .txt {
	padding: 0 15px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.