CSS Flexbox How to evenly space two elements with a separator - html

Question

I am trying to evenly space two HTML elements (div) which both contain a list of <a> tags/links. The container width is 600px and there is a separator in between these two lists.
By running the snippet below you can see how the .dropdownSection elements are evenly sized using flex: 1. However, my problem is the separator (.sectionSeparator ) doesn't look even between the two lists?
What can I do to make it so that everything is evenly spaced, it seems like gap: 30px works well but the separator still isn't even, the second list is too close to the separator.
The reason I have used position: absolute on .dropdownLinks is so that the CSS hover transition does not push and cause other divs to be moved.
Maybe there is another way to structure this but this is my attempt.
Note: The grey boxes are to represent icons that would be there.
#container {
width: 600px;
padding-top: 20px;
}
#listSectionContainer {
display: flex;
justify-content: space-evenly;
padding: 30px;
gap: 30px;
}
.dropdownSection {
display: flex;
flex-direction: column;
justify-content: flex-start;
position: relative;
height: 210px;
flex: 1;
}
.sectionSeparator {
width: 3px;
background-color: rgba(178, 178, 178, 0.35);
border-radius: 8px;
}
.dropdownSectionTitle {
display: flex;
align-items: flex-start;
margin-right: auto;
color: #8B8792;
font-size: 20px;
}
.dropdownSectionTitle i {
height: 20px;
width: 20px;
background: grey;
margin-right: 10px;
}
.dropdownSectionTitle p {
font-weight: bold;
margin: 0;
}
.dropdownLinks {
display: flex;
flex-direction: column;
margin-top: 25px;
font-size: 18px;
padding-left: 28px;
position: absolute;
top: 20px;
}
.dropdownLinks a:not(:last-of-type) {
margin-bottom: 10px;
}
.dropdownLinks a:link {
color: #939393;
text-decoration: none;
transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
}
.dropdownLinks a:visited {
color: #939393;
text-decoration: none;
}
.dropdownLinks a:hover {
color: #7B69FE;
padding-left: 5px;
text-decoration: none;
}
.dropdownLinks a:active {
color: #939393;
text-decoration: none;
}
<div id="container">
<div id="listSectionContainer">
<div class="dropdownSection">
<div class="dropdownSectionTitle"><i class="fas fa-book-reader"></i>
<p>Getting Started</p>
</div>
<div class="dropdownLinks">
Introduction
Introduction Two
Introduction Three
Introduction Four
Introduction Five
</div>
</div>
<div class="sectionSeparator"></div>
<div class="dropdownSection">
<div class="dropdownSectionTitle"><i class="fas fa-plug"></i>
<p>Second List</p>
</div>
<div class="dropdownLinks">
Introduction
Introduction Two
Introduction Three
Introduction Four
Introduction Five
</div>
</div>
</div>
</div>

Answer 1

After further investigation, there is nothing wrong in your code.
As you can see in the below snippet. The sections are evenly separated from the vertical line.
I have used a border for both container and the sections to understand that clearly.
#container {
width: 600px;
padding-top: 20px;
}
#listSectionContainer {
display: flex;
justify-content: space-evenly;
padding: 30px;
gap: 30px;
border: 1px solid blue;
}
.dropdownSection {
display: flex;
flex-direction: column;
justify-content: flex-start;
position: relative;
height: 210px;
flex: 1;
border: 1px solid #f00;
}
.sectionSeparator {
width: 3px;
background-color: rgba(178, 178, 178, 0.35);
border-radius: 8px;
}
.dropdownSectionTitle {
display: flex;
align-items: flex-start;
margin-right: auto;
color: #8B8792;
font-size: 20px;
}
.dropdownSectionTitle i {
height: 20px;
width: 20px;
background: grey;
margin-right: 10px;
}
.dropdownSectionTitle p {
font-weight: bold;
margin: 0;
}
.dropdownLinks {
display: flex;
flex-direction: column;
margin-top: 25px;
font-size: 18px;
padding-left: 28px;
position: absolute;
top: 20px;
}
.dropdownLinks a:not(:last-of-type) {
margin-bottom: 10px;
}
.dropdownLinks a:link {
color: #939393;
text-decoration: none;
transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
}
.dropdownLinks a:visited {
color: #939393;
text-decoration: none;
}
.dropdownLinks a:hover {
color: #7B69FE;
padding-left: 5px;
text-decoration: none;
}
.dropdownLinks a:active {
color: #939393;
text-decoration: none;
}
<div id="container">
<div id="listSectionContainer">
<div class="dropdownSection">
<div class="dropdownSectionTitle"><i class="fas fa-book-reader"></i>
<p>Getting Started</p>
</div>
<div class="dropdownLinks">
Introduction
Introduction Two
Introduction Three
Introduction Four
Introduction Five
</div>
</div>
<div class="sectionSeparator"></div>
<div class="dropdownSection">
<div class="dropdownSectionTitle"><i class="fas fa-plug"></i>
<p>Second List</p>
</div>
<div class="dropdownLinks">
Introduction
Introduction Two
Introduction Three
Introduction Four
Introduction Five
</div>
</div>
</div>
</div>