How to make split text blocks?

Hi squarespace! Im having a bit of trouble creating a split screen that has text blocks on either side.

Ive figured out how to do the following with an image. However, how do I create the examples attached.

Heres my css code:

section[data-section-id="614a1d0f24ff414dcbe83d34"] {
    .content-wrapper  {
      padding: 0px !important;
      margin: 0px auto;
      display: contents;
    }
.sqs-layout .sqs-row .sqs-block {
  padding-bottom: 0px !important;
  padding-top: 0px !important;
}

overflow-x: hidden !important;
overflow-y: hidden !important;
}
  
.image-card-wrapper .sqs-dynamic-text-container {
  padding: 100px !important;
}

You can create 2 text blocks, then we will give the code to

• remove padding, spacing around these blocks
• set different background for 2 block