Creating a parallel section?

Question

How would I create a parallel section on my webpage if I have the code below where the div border width is 50% of page. So a similar section possibly different colour to the right.

HTML
<div>This is my test</div>

CSS

div {
background-color: #c6bbed;
border: 5px solid purple;
width: 50%;
height: 100%;

}

Answer 1

Try this:
body {
margin: 0;
padding: 0;
}

div {
display: inline-block;
background-color: #c6bbed;
border: 5px solid purple;
width: 50vw;
height: 100vh;
box-sizing: border-box;

}

div:nth-child(1) {
margin-right: -1vw;
}

div:nth-child(2) {
margin-left: -1vw;
}

// Since actual width cannot have exact 100vw, i use negative margin to adjust it.

https://code.sololearn.com/WZgaVMM6YZ43/?ref=app

Answer 2

https://code.sololearn.com/WHPtdF6L0EgK/?ref=app

something like that?