Example_submissionSection

Hello!

The best way I can describe this is to create a visual example (attached). I have created a div banner with a background color, and want to include a submission box on the right hand side--spacing in a sort of 66/33% allocation?

How would you suggest coding? Using basic HTML/CSS--CSS of the box is setup and working fine. The main issue is the submission box div is larger (vertically) than the banner box. My brain is having a hard time wrapping around the idea--there is already text above and below the mentioned area--so an absolute position is out of the question (?).

CodePudding user response：

.parent {
  display: flex;
  padding: 2.5rem;
  align-items: center;
  position: relative;
  justify-content: space-between;
  flex-direction: row;
  width: 100%;
  gap: 2rem;
  box-sizing: border-box;
}
.red {
    position: absolute;
    height: calc(100% - 12rem);
    width: 100%;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: red;
    z-index: -1;
}
.left-col {
  width:66.66%;
  color:white;
  height:100%;
}
.right-col {
  width:33.33%;
  height:100%;
}

.right-col .content {
  border:2px solid blue;
  height: 250px;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 2.5rem;
}

<div >
  <div ></div>
  <div >
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
  </div>
  <div >
    <div >
      <span>We invite you to tell your pandemic story through recipes, stories, and images.
        <button value="Contribute"></button>
    </div>
  </div>
</div>