CSS Create Responsive Side by Side div design

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>