Neither of the other answers adequately address the issue that either column A or B may contain variable content. Simply adding margins to one of the columns will not resolve the issue of the
white divider that should grow with the text length like this
and
white line divider that expands based on the text length in either column
.
Resolution
I struggled to find a pure CSS solution since CSS does not provide a way to determine element heights. I resorted to a small snippet of JavaScript to tackle the problem.
// calculate paragraph heights
let heightColA = document.querySelector('.col-a p').offsetHeight;
let heightColB = document.querySelector('.col-b p').offsetHeight;
// apply border after comparing heights of Col A and Col B
if (heightColA > heightColB) {
document.querySelector('.col-a p').style = 'border-right: 5px solid #fff; margin-right: -5px;'
} else {
document.querySelector('.col-b p').style = 'border-left: 5px solid #fff; margin-left: -5px;'
}
// console.log(heightColA, heightColB)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
width: 100%;
background-color: #000;
height: 500px;
color: #fff;
}
.container>div {
width: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.container .col-a {
border-right: 5px solid #d00;
}
.container>div>p {
padding: 2rem;
}
<div class="container">
<div class="col-a">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure, hic provident? Iste commodi neque corrupti debitis mollitia atque, eveniet iure!
</p>
</div>
<div class="col-b">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure, hic provident? Iste commodi neque corrupti debitis mollitia atque, eveniet iure! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima ipsum dolorem, nisi voluptates, rerum
ipsa labore eius aliquam quas magni amet. Accusantium architecto perspiciatis, minus non voluptatibus totam sequi. Placeat sint error doloremque eveniet quibusdam quo delectus, laboriosam alias autem voluptatum unde eum, officiis omnis vel molestias
dolorem distinctio nulla! Voluptatem qui explicabo corrupti autem consequuntur cupiditate sequi quos reprehenderit velit, porro, assumenda, officiis deserunt! Corrupti qui perspiciatis nemo. Repellendus qui facilis similique earum molestias distinctio
quae sed, laboriosam laudantium corporis, suscipit, dolor accusamus pariatur iste nam. Exercitationem ab vitae eveniet. Blanditiis, facilis quidem eos ad aut quibusdam laudantium a!
</p>
</div>
</div>
By increasing the content in either column, the white divider will adjust accordingly.
I trust this adequately addresses the inquiries.