容器内左列内容，右列全宽

Question

想要用 2 个相邻的 div 进行布局。第一个左 div 应该在容器中，第二个右 div 应该有全宽。两个 div 必须具有不同的全角背景。

我在制作此布局时遇到问题：

我的工作：

.wp-block-columns{
  display:flex;
}
.wp-block-column{
 flex-basis: 0;
  flex-grow: 1;
}

.blog{
  background:red;
}
.wp-block-group__inner-container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.icons:before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 50vw;
    background: #F0F0F0;
}
.icons{
  position:relative;
}
.icons p{
  position: relative;
  z-index: 5;
}

<div class="wp-block-columns">
  <div class="wp-block-group__inner-container">
    <div class="wp-block-columns">
    <div class="wp-block-column icons">
      <p>THIS TEXT SHOUD BE IN CONTAINER</p>
    </div>
     <div class="wp-block-column blog">
     <p>FULL WIDTH TEXT ...... IGNORE COINTAINER ................  ssad</p>
    </div>
    </div>
  </div>
</div>