Centred vertical line between two divs - html

Question

I am trying to achieve the following layout (except with a straight line obviously)
But I'm unsure how to, I tried adding a right border to the left element, but it isn't centred. How do I go about it?
This is what I have at the moment
div.contentswrapper {
text-align: center;
margin: 0 auto;
max-height: 720px;
}
div.pageleft, div.pageright {
display: inline-block;
vertical-align: top;
overflow: auto;
}
div.pageleft, div.pageright {
width: 40%;
margin-left: 3%;
margin-right: 3%;
}
<div class="contentswrapper">
<div class="pageleft">
<h1>Lorem Ipsum</h1>
<p>
</p>
<p>
</p>
</div>
<div class="pageright">
<h1>Lorem Ipsum</h1>
<p>
</p>
<p>
</p>
</div>

Answer 1

Change your margins to paddings, and then set the border
div.contentswrapper {
text-align: center;
margin: 0 auto;
max-height: 720px;
}
div.pageleft,
div.pageright {
display: inline-block;
vertical-align: top;
overflow: auto;
}
div.pageleft,
div.pageright {
width: 40%;
padding-left: 3%;
padding-right: 3%;
}
div.pageleft {
border-right: 2px solid red;
}
<div class="contentswrapper">
<div class="pageleft">
<h1>Lorem Ipsum</h1>
<p>
</p>
<p>
</p>
</div>
<div class="pageright">
<h1>Lorem Ipsum</h1>
<p>
</p>
<p>
</p>
</div>
</div>
Option 2, use a pseudo element and its border
div.contentswrapper {
position: relative;
text-align: center;
margin: 0 auto;
max-height: 720px;
}
div.contentswrapper::after {
content: '';
position: absolute;
top: 0;
left: calc(50% - 2px);
bottom: 0;
width: 0;
border-right: 2px solid red;
}
div.pageleft,
div.pageright {
display: inline-block;
vertical-align: top;
overflow: auto;
}
div.pageleft,
div.pageright {
width: 40%;
margin-left: 3%;
margin-right: 3%;
}
<div class="contentswrapper">
<div class="pageleft">
<h1>Lorem Ipsum</h1>
<p>
</p>
<p>
</p>
</div>
<div class="pageright">
<h1>Lorem Ipsum</h1>
<p>
</p>
<p>
</p>
</div>
</div>

Answer 2

You don't really need to use inline-block, you can just float them and set the right border of the left div.
Changing the margin settings to paddings instead will correct the slight center misalignment because your total widths don't add up to a perfect 100%.
Also, you don't need 2 style rules with the same selectors, you can combine them.
div.contentswrapper {
text-align: center;
margin: 0 auto;
max-height: 720px;
}
.pageleft { border-right:2px solid black;}
div.pageleft, div.pageright {
float:left;
vertical-align: top;
width: 42%;
padding-left: 3%;
padding-right: 3%;
}
<div class="contentswrapper">
<div class="pageleft">
<h1>Lorem Ipsum</h1>
<p>sdfff</p>
<p>sdfsdfsd</p>
</div>
<div class="pageright">
<h1>Lorem Ipsum</h1>
<p>sdfff</p>
<p>sdfsdfsd</p>
</div>