Vertical line between two divs? - html

Question

I have a problem with positioning the vertical line. Here's the project:
https://prnt.sc/wp2vh4
div class="col span-1-of-2"
to separate those two lists BUT - there's a grey vertical line in the 'center' between them. When I make border-right for the first div, it's way too on the right side. How can I make this line more in the center?
two elements are block - should it be something connected to that? but I don't want to 'ruin' the column system.

Answer 1

You could essentially take the two columns and give them a box-shadow of a half pixel each (totaling to 1px side by side). Half pixels don't work with border declarations reason being.
.container {
display: flex;
height: 150px;
}
.col {
align-items: center;
display: flex;
flex: 1;
justify-content: center;
}
.left {
box-shadow: .5px 0 0 #000;
}
.right {
box-shadow: -.5px 0 0 #000;
}
<div class="container">
<div class="col left">Left</div>
<div class="col right">Right</div>
</div>
  

Answer 2

There are a lot of ways to do this, another solution would be using the old columns css property, like this
.container {
columns: 2;
column-gap: 0;
column-fill: balance;
column-rule: 2px solid #ff44cc;
text-align: center;
padding: 10px;
}
<div class="container">
<div>Block</div>
<div>Block</div>
</div>
Take the solution that mosts suits you.

Answer 3

There are many ways to accomplish a vertical divider between columns.
Option #1
The easiest is to utilize CSS flex-box to create the columns. This will cause both columns to be the same height in the container and you can use a border to create the visual divider.
/* this section illustrates the container sizes */
#container {
border: 1px dashed #dadada;
padding: 2px;
}
.col {
padding: 20px;
font-family: Helvetica, Arial, Sans-serif;
background: tan;
border: 1px dashed #333;
}
/* this shows the solution */
#container {
display:flex;
justify-content: space-between;
}
.col {
flex-basis: 50%;
}
.col:first-child {
border-right: 3px solid aqua;
}
<div id="container">
<div class="col">Column 1</div>
<div class="col">Column 2 with lots of content that makes it much taller than the other column and messes with heights.</div>
</div>
Option #2
Use a pseudo element on the parent container to create a border.
/* this section illustrates the container sizes */
#container {
border: 1px dashed #dadada;
padding: 2px;
}
.col {
padding: 20px;
font-family: Helvetica, Arial, Sans-serif;
background: tan;
border: 1px dashed #333;
}
/* The solution */
#container {
position: relative;
overflow: auto;
}
#container:before {
content: '';
width: 2px;
background: aqua;
position: absolute;
top: 0;
left: 50%;
bottom: 0;
transform: translateX(-50%);
}
.col {
float:left;
width: calc(50% - 42px);
/* need to remove the border & padding width from the full width */
}
<div id="container">
<div class="col">Column 1</div>
<div class="col">Column 2 with lots of content that makes it much taller than the other column and messes with heights.</div>
</div>
Option #3
Really there are lots more options, a CSS gradient background, shadows, CSS Grid, CSS Columns, this list goes on.