Can't get divs to align properly with css - html

Question

My setup is this:
.cprp_data {
width: 100%;
overflow: hidden;
}
.cprp_title {
width: 80%;
float: left;
}
.gelijkeniscore {
float: right;
}
.cprp_percentage {
float: right;
}
.cprp_excerpt {
width: 80%;
float: left;
}
.cprp-custom-container {
float: right;
}
<div class="cprp_data">
<div class="cprp_title">TITLE</div>
<div class="gelijkeniscore">SOME CONTENT</div>
<div class="cprp_percentage">SOME CONTENT</div>
<div class="cprp_excerpt">SOME CONTENT</div>
<div class="cprp-custom-container">SOME CONTENT IN SEVERAL DIVS
</div>
</div>
cprp_data should function as the wrapper, and this is how i want the other divs inside it to to align:
<cprp_title> <gelijkeniscore>
<cprp_excerpt> <cprp_percentage>
<cprp-custom-container>
To be clear, divs cprp_excerpt and cprp_title should align left on top of each other using a width of 80%, and the other 3 divs are supposed to align right also on top of each other using the remaining 20%, looking kinda like a sidebar.
I can't get it to work. Been trying for hours using several CSS setups. The above CSS is as close as i have gotten so far. But somehow the cprp_excerpt div keeps taking up 100% of the width pushing the cprp-custom-container way down. Any help would be much appreciated!

Answer 1

shift the cprp_percentage div after the cprp_excerpt div

Answer 2

As inferred from the problem statement:
all the internal divs are now stacked upon each other in the desired hierarchy
left container occupies 80% screen width
right container occupies 20% screen width
The container wrapper remains intact, i have just introduced two sub-wrappers to distinguish contents of left and right side of screen
Hope this code helps!
.cprp_data {
width: 100%;
overflow: hidden;
/* display flex to control the scenario */
display: flex;
}
/*.cprp_title {
width: 80%;
float: left;
}
.gelijkeniscore {
float: right;
}
.cprp_percentage {
float: right;
}
.cprp_excerpt {
width: 80%;
float: left;
}
.cprp-custom-container {
float: right;
}
*/
/* as the left section should be 80% in width */
.left{
width: 80%;
border: 1px solid #000000;
}
/* as the right section should be 20% */
.right{
width: 20%;
border: 1px solid #000000;
}
<div class="cprp_data">
<div class="left">
<div class="cprp_title">TITLE</div>
<div class="cprp_excerpt">SOME CONTENT</div>
</div>
<div class="right">
<div class="gelijkeniscore">SOME CONTENT</div>
<div class="cprp_percentage">SOME CONTENT</div>
<div class="cprp-custom-container">SOME CONTENT IN SEVERAL DIVS
</div>
</div>
</div>