Flexboxレイアウト – 横並びコンテンツの上下中央配置

HTML

<div class="wrap">
  <div class="image">
    <img src="picture.jpg" alt="提案している様子の写真">
  </div>
  <div class="text">
    <h2>上下中央に配置します</h2>
    <p>写真と横並びになった文章を上下中央に配置させます。文章量が少なく、複数箇所に配置させるときに全体のバランスがとれるので効果的です。</p>
  </div>
</div>

CSS

.wrap {
  display: flex;
  align-items: center;
  width: 600px;
}

.image {
  width: 50%;
}

.text {
  padding: 0 30px;
  width: 50%;
}

img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}