Can't get divs to align properly with css

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

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>

Answer 2

shift the cprp_percentage div after the cprp_excerpt div