<style>
.main-container {
  width: 200px;
  margin-bottom: 10px;
}

.non-intrusive-float {
  float: right;
  width: 50px;
  background-color: blue;
  position: relative;
  z-index: -1; /* move it behind the overlapping floats */
}

.container-for-floats {
  width: 150px;
  outline: 1px solid black;
}

.first-float {
  float: left;
  height: 25px;
  background-color: green;
}

.second-float {
  float: left;
  height: 25px;
  background-color: green;
}
</style>
<div class=main-container>
  <div class=non-intrusive-float style="height: 25px"></div>
  <div class=container-for-floats style="height: 25px">
     <div class=first-float style="width: 220px;"></div>
  </div>
</div>

<div class=main-container>
  <div class=non-intrusive-float style="height: 50px"></div>
  <div class=container-for-floats style="height: 50px">
     <div class=first-float style="width: 220px;"></div>
     <div class=second-float style="width: 160px"></div>
  </div>
</div>

<div class=main-container>
  <div class=non-intrusive-float style="height: 50px"></div>
  <div class=container-for-floats style="height: 50px">
     <div class=first-float style="width: 10px;"></div>
     <div class=second-float style="width: 140px"></div>
  </div>
</div>

<div class=main-container>
  <div class=non-intrusive-float style="height: 50px"></div>
  <div class=container-for-floats style="height: 50px">
     <div class=first-float style="margin-left: -10px; width: 10px;"></div>
     <div class=second-float style="width: 150px"></div>
  </div>
</div>

<div class=main-container>
  <div class=non-intrusive-float style="height: 50px"></div>
  <div class=container-for-floats style="height: 50px">
     <div class=first-float style="width: 10px;"></div>
     <div class=second-float style="width: 150px"></div>
  </div>
</div>

<div class=main-container>
  <div class=non-intrusive-float style="height: 50px"></div>
  <div class=container-for-floats style="height: 50px">
     <div class=first-float style="margin-left: -5px; width: 10px;"></div>
     <div class=second-float style="width: 150px"></div>
  </div>
</div>