Set fixed divs regardless of the size of the content - html

Question

I'm developing an item list that is filled dinnamically with some data that is getting from a controller.
I had a problem when the data is shown because I need to show it into two columns (called "record_left_content" and "record_right_content"), but when the obtained text is too long, the two columns are merged into one.
Someone knows how to positionate the both colums in a fixed way regardless of the size of the text/content ?
Code:
<div class="col-lg-9" id="middle_column">
<div class="text-center text-muted" t-if="not education_timetable_ids">
<h1>No timetables found</h1>
</div>
<div class="text-center text-muted" t-else="">
<ul class="list-unstyled">
<li t-foreach="education_timetable_ids" t-as="timetable" t-attf-class="media">
<div itemscope="itemscope" class="media-body" itemtype="https://schema.org/learningResourceType" >
<h4>
<a t-attf-href="/" itemprop="url" onclick="return false"><span itemprop="schedule"><t t-esc="timetable.display_name" /> </span></a>
</h4>
<div id="record_left_content">
<div>
<span t-if="timetable.academic_year_id" class="badge badge-info">
<i class="fa fa-clock-o" role="img" aria-label="Academic year" title="Academic year"></i>
Academic year:
<t t-esc="timetable.academic_year_id.name" />
</span>
//more code
<div id="record_right_content">
//more code
</div>
.media {
padding: 10px;
background-color: #e9ecef;
border-radius: 0.25rem;
margin: 10px;
}
#record_left_content {
float: left;
margin-left: 20%;
}
#record_right_content {
float: right;
margin-right: 20%;
}
Thanks for reading!