CSS Create Responsive Side by Side div design - html

Question

I am trying to create a website where I have divs side by side in a list (separated by a vertical line). I am referencing this design
I am having trouble making the design responsive: I tried using % but when resizing the browser, the divs containing my text content move down and awkwardly collide/crash into each other (and don't stay separated by the vertical line). I am wondering if anyone knows how to keep the divs separated and responsive when resizing
#experience {
border: 1px solid red;
padding-top: 0px;
margin-top: 0px;
min-height: 1000px;
}
.center_text {
border: 1px solid black;
padding-top: 1%;
text-align: center;
color: #001418;
font-weight: 600;
font-family: 'Josefin Sans', sans-serif;
font-size: 2em;
}
.vline {
height: 740px;
width: 1px;
border: none;
border-right: solid 1px black;
z-index: 10;
}
.circle2 {
border: 50px solid black;
width: 1px;
border: none;
border-right: solid 1px black;
z-index: 10;
}
#exp1 {
border: 1px solid blue;
font-family: 'Josefin Sans', sans-serif;
color: #182153;
margin-top: -43%;
height: 150px;
}
.circle:before {
content: ' \25CF';
font-size: 20px;
margin-left: 49.69%;
}
.exp_text {
display: flex;
flex-grow: 1;
flex-wrap: wrap;
margin: 0 auto;
border: 1px solid red;
margin-top: -2%;
min-height: 110px;
}
.left_exp {
border: 1px solid green;
text-align: right;
margin-left: 25%;
}
.right_exp {
margin-top: -5.8%;
border: 1px solid green;
width: min-content;
margin-left: 60%;
}
.date {
font-size: 1.3em;
font-weight: 600;
}
.company {
font-size: 1.3em;
font-weight: 600;
}
.role {
font-size: 1em;
min-width: 250px;
}
.job_descr {
font-size: 1em;
min-width: 250px;
}
<div id="experience">
<h3 class="center_text"> Experience</h3>
<div>
<hr class="vline" />
<div id="exp1">
<span class="circle"></span>
<div class="exp_text">
<div class="left_exp">
<div class="date">
<p>2022 </p>
</div>
<div class="role">
<p>Software Engineering Intern</p>
</div>
</div>
<div class="right_exp">
<div class="company">
<p>Company Name</p>
</div>
<div class="job_descr">
<p>Description.................</p>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

The solution was to use flexbox.
#experience_content {
margin: 0 auto;
min-height: 100vh;
width: min-content;
}
.row {
display: flex;
}
.column {
color: black;
flex:33.3%;
padding: 20px;
}
and
<div id="experience">
<div id="experience_content">
<div class="row">
<div class="column">
</div>
</div>
</div>
</div>