<div class="block">
  <div class="block__first">
    <div class="block__content">1</div>
  </div>
  <div class="block__second">
    <div class="block__content">2</div>
  </div>
</div>

.block {
  margin: 0 auto;
  width: 50%;
  outline: 1px dashed gray;
}

.block__first {
  position: relative;
  width: 72%;
  color: #434363;
  background-color: #fdca5e;
}

.block__second {
  position: relative;
  width: 72%;
  margin-left: 28%;
  margin-top: -44%; /* -72 + 28 */
  color: #fdca5e;
  background-color: #434363;
}

.block__first::before,
.block__second::before {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.block__content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 15px;
  font-size: 2rem;
}