CSS Styling Without Using z-index, Absolute and Relative Positioning

I want to style a web page like thisWhat I Would Like To Do

All I could think of is z-indexing, absolute and relative positioning. So this is what I did:

I first tried doing a table but the background had gaps in it.

.section2 {
  width: 100%;
  background-color: #f5f5f5;
  height: 750px;
  position: relative;
  z-index: 0;
}

.square1 {
  width: 300px;
  height: 300px;
  background-color: #969696;
  position: relative;
  z-index: 1;
}

.text1 {
  width: 300px;
  height: 260px;
  position: absolute;
  top: 0px;
  left: 370px;
  z-index: -1;
}

.text2 {
  width: 300px;
  height: 260px;
  position: relative;
  z-index: 1;
  top: 50px;
  left: 0px;
}

.square2 {
  background: #969696;
  width: 300px;
  height: 300px;
  position: absolute;
  top: 350px;
  left: 370px;
  z-index: -1;
}

.button {
  display: block;
  width: 115px;
  height: 20px;
  background: #969696;
  padding: 5px;
  text-align: center;
  border-radius: 5px;
  color: white;
  font-weight: bold;
  line-height: 25px;
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <div class="section2">
    <div class="square1"></div>
    <div class="text1">
      <h2 style="color:#7a7a7a">Heading</h2>
      <h1 style="color:#707070">Title</h1>
      <p style="color:#707070">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip</p>
      <a class="button">LINK</a>
    </div>
    <div class="square2"></div>
    <div class="text2">
      <h2 style="color:#7a7a7a">Heading</h2>
      <h1 style="color:#707070">Title</h1>
      <p style="color:#707070">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip</p>
      <a class="button">LINK</a>
    </div>
  </div>
</body>

</html>

Which works well on its own.

I adjusted it for a width of screen size of width 100%, square size of 650px width and 425px height and top 530px for the second square and plugged it into my code. It is messing up the existing code with divs being intertwined and the code overflowing into the next div.

Does anyone know how to achieve the objective without doing what I did. What I am looking for is a totally different approach and an out-of-the-box solution.

Solution

I have implemented using grid layout; Hope it helps.

.section2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 4fr 1fr 4fr;
  background-color: #969696;
}
.square1 {
  grid-column-start: 1;
}
.text1 {
  background-color: #f5f5f5;
  padding: 4rem;
  grid-row: 1 / 3;
  grid-column: 2/3;
}

.square2 {
  grid-column-start: 2;
}

.text2 {
  grid-column- start: 1;
  grid-row: 2 / 4;
  background-color: #f5f5f5;
  padding: 4rem;
  
}

.button {
  display: block;
  width: 115px;
  height: 20px;
  background: #969696;
  padding: 5px;
  text-align: center;
  border-radius: 5px;
  color: white;
  font-weight: bold;
  line-height: 25px;
}

<body>
    <div class="section2">
        <div class="square1"></div>
        <div class="text1">
            <h2 style="color:#7a7a7a">Heading</h2>
            <h1 style="color:#707070">Title</h1>
            <p style="color:#707070">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip</p>
            <a class="button">LINK</a>
        </div>
        <div class="square2"></div>
        <div class="text2">
            <h2 style="color:#7a7a7a">Heading</h2>
            <h1 style="color:#707070">Title</h1>
            <p style="color:#707070">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip</p>
            <a class="button">LINK</a>
        </div>
      </div>
</body>