<main>
  <section>
    <div class="column">
      <p><img src="https://unsplash.it/1600/900" alt=""></p>
    </div>
    <div class="column">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </section>

  <section class="reverse">
    <div class="column column-outside-right">
      <p><img src="https://unsplash.it/1600/900" alt=""></p>
    </div>
    <div class="column">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </section>

  <section>
    <div class="column">
      <p><img src="https://unsplash.it/1600/900" alt=""></p>
    </div>
    <div class="column">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </section>

  <section class="reverse">
    <div class="column">
      <p><img src="https://unsplash.it/1600/900" alt=""></p>
    </div>
    <div class="column">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </section>

  <section>
    <div class="column column-outside-left">
      <p><img src="https://unsplash.it/1600/900" alt=""></p>
    </div>
    <div class="column">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </section>

  <section>
    <div class="outside-right">
      <p><img src="https://unsplash.it/1600/900" alt=""></p>
    </div>
  </section>

  <section>
    <div class="outside-left">
      <p><img src="https://unsplash.it/1600/900" alt=""></p>
    </div>
  </section>
</main>
/*スクロールバーが表示される閲覧環境用に設定*/
main{
  overflow: hidden;
}

section{
  display: flex;
  justify-content: space-between;
  max-width: 1000px;
  padding: 40px;
  margin: auto;
}

p{
  font-size: 18px;
  line-height: 1.8;
}

img{
  width: 100%;
  height: auto;
}

.reverse{
  flex-direction: row-reverse;
}

.column{
  width: 48%;
}

/*右側へ要素を広げる(2カラム)*/
.column-outside-right{
    flex: 1;
    margin-right: calc(50% - 50vw);
    margin-left: 4%;
}

/*左側へ要素を広げる(2カラム)*/
.column-outside-left{
    flex: 1;
    margin-left: calc(50% - 50vw);
    margin-right: 4%;
}

/*右側へ要素を広げる(1カラム)*/
.outside-right{
  margin-right: calc(50% - 50vw);
}

/*左側へ要素を広げる(1カラム)*/
.outside-left{
  margin-left: calc(50% - 50vw);
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.