Force column to stay on right (float-right) - html

Question

I've got three columns in one row. Each column is lg-6, which makes the last column span below the other two. This column is placed to the right using float-right. But whenever the column above the last column (Column 2) gets more content than the first column, the last column (Column 3) are moved to the left (as showed in the photo below). Is there any way to prevent the column being moved like this? Force it to stay right.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row d-md-block mt-4 mx-n3 px-4">
<div class="card col-lg-6 col-sm-12 mx-n1 float-left">
<div class="card-header screensCardHeader">
<h4 class="m-0 font-weight-bold text-header">Column 1</h4>
</div>
<div class="card-body">
<div class="table-responsive">
<table id="table_0_view" class="table" width="100%" cellspacing="0">
<thead class="screensThead">
<tr>
<th>#</th>
<th>Namn</th>
</tr>
</thead>
<tbody id="tbody_0_view" class="screenstable screenstableque">
<tr id="2" sport="0" class="screenstablerow">
<td class="viewtd row-id-0">1</td>
<td>Person 1</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="card col-lg-6 col-sm-12 mx-n1 float-right order-1">
<div class="card-header screensCardHeader">
<h4 class="m-0 font-weight-bold text-header">Column 2</h4>
</div>
<div class="card-body">
<div class="table-responsive">
<table id="table_1_view" class="table" width="100%" cellspacing="0">
<thead class="screensThead">
<tr>
<th>#</th>
<th>Namn</th>
</tr>
</thead>
<tbody id="tbody_1_view" class="screenstable screenstableque">
<tr id="3" sport="1" class="screenstablerow">
<td class="viewtd row-id-1">1</td>
<td>Person 2</td>
</tr>
<tr id="4" sport="1" class="screenstablerow">
<td class="viewtd row-id-1">1</td>
<td>Person 3</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="card col-lg-6 col-sm-12 mx-n1 float-right justify-content-end">
<div class="card-header screensCardHeader">
<h4 class="m-0 font-weight-bold text-header">Column 3</h4>
</div>
<div class="card-body">
<div class="table-responsive">
<table id="table_2_view" class="table" width="100%" cellspacing="0">
<thead class="screensThead">
<tr>
<th>#</th>
<th>Namn</th>
</tr>
</thead>
<tbody id="tbody_2_view" class="screenstable screenstableque">
</tbody>
</table>
</div>
</div>
</div>
</div>

Answer 1

Don't use float property, instead use d-flex in the parent.
And use ml-auto in column 3
UPDATE - regarding OP comments
But this means that Column 1 will follow the height of column 2 right? Is there any way to hide the whitespace appearing in Column 1 when adding stuff in column 2 then?
Answer: use align-items-start in the row div
Also, the spacing between right and left column seems to disappear. I used a negative margin of 1 with mx-n1 earlier. Any way to get this back while using d-flex? Used according to documentation of last bootstrap, negative margin: getbootstrap.com/docs/4.5/utilities/spacing
Answer: Use the card utility class inside of col-*-* instead of using it along with
N.B. : width and cellspacing attributes are deprecated
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row d-flex mt-4 px-4 align-items-start">
<div class="col-lg-6 col-sm-12 mb-4">
<div class="card">
<div class="card-header screensCardHeader">
<h4 class="m-0 font-weight-bold text-header">Column 1</h4>
</div>
<div class="card-body">
<div class="table-responsive">
<table id="table_0_view" class="table">
<thead class="screensThead">
<tr>
<th>#</th>
<th>Namn</th>
</tr>
</thead>
<tbody id="tbody_0_view" class="screenstable screenstableque">
<tr id="2" sport="0" class="screenstablerow">
<td class="viewtd row-id-0">1</td>
<td>Person 1</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-sm-12 mb-4">
<div class="card">
<div class="card-header screensCardHeader">
<h4 class="m-0 font-weight-bold text-header">Column 2</h4>
</div>
<div class="card-body">
<div class="table-responsive">
<table id="table_1_view" class="table">
<thead class="screensThead">
<tr>
<th>#</th>
<th>Namn</th>
</tr>
</thead>
<tbody id="tbody_1_view" class="screenstable screenstableque">
<tr id="3" sport="1" class="screenstablerow">
<td class="viewtd row-id-1">1</td>
<td>Person 2</td>
</tr>
<tr id="4" sport="1" class="screenstablerow">
<td class="viewtd row-id-1">1</td>
<td>Person 3</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-sm-12 ml-auto mb-4">
<div class="card">
<div class="card-header screensCardHeader">
<h4 class="m-0 font-weight-bold text-header">Column 3</h4>
</div>
<div class="card-body">
<div class="table-responsive">
<table id="table_2_view" class="table">
<thead class="screensThead">
<tr>
<th>#</th>
<th>Namn</th>
</tr>
</thead>
<tbody id="tbody_2_view" class="screenstable screenstableque">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>