<section class="section">
  <div class="section__inner">
    <h2 class="section__heading">汎用人型決戦エンジニア</h2>
    <div class="section__column">
      <p class="section__description">
        absoluteを使っちゃダメだ!absoluteを使っちゃダメだ!absoluteを使っちゃダメだ!absoluteを使っちゃダメだ!absoluteを使っちゃダメだ!absoluteを使っちゃダメだ!absoluteを使っちゃダメだ!absoluteを使っちゃダメだ!absoluteを使っちゃダメだ!absoluteを使っちゃダメだ!absoluteを使っちゃダメだ!absoluteを使っちゃダメだ!absoluteを使っちゃダメだ!absoluteを使っちゃダメだ!absoluteを使っちゃダメだ!absoluteを使っちゃダメだ!absoluteを使っちゃダメだ!absoluteを使っちゃダメだ!absoluteを使っちゃダメだ!absoluteを使っちゃダメだ!
      </p>
      <div class="section__image">
        <img src="https://images.pexels.com/photos/1287145/pexels-photo-1287145.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="">
      </div>
    </div>
  </div>
</section>
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&display=swap');

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

.section {
  padding-block: 80px;
}

.section__inner {
  padding-inline: 24px;
}

@media screen and (min-width: 768px) {
  .section__inner {
    max-width: 960px;
    margin-inline: auto;
  }
}

@media screen and (min-width: 768px) {
  .section__column {
    position: relative;
    margin-top: 120px;
  }
}

.section__heading {
  text-align: center;
  font-family: 'Josefin Sans', sans-serif;
  font-weight: bold;
  font-size: 2.4rem;
  line-height: 1;
}

.section__image {
  margin-top: 32px;
}

@media screen and (min-width: 768px) {
  .section__image {
    position: absolute;
    top: -80px;
    right: 80px;
    z-index: -1;
    width: 50%;
    margin-top: 0;
  }
}

.section__description {
  margin-top: 24px;
  font-size: 0.875rem;
  line-height: 2;
}

@media screen and (min-width: 768px) {
  .section__description  {
    width: 50%;
    margin-top: 0;
  }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.