<style>
.container {
  margin-bottom: 10px;
  outline: 1px solid black;
  width: 150px;
  position: relative;
}

.first-child {
  width: 220px;
  height: 25px;
  background-color: green;
}

.second-child {
  width: 160px;
  height: 25px;
  background-color: green;
}

.float-child {
  background-color: blue;
  width: 50px;
  height: 50px;
  position: absolute;
  left: 150px;
  top: 0px;
  z-index: -1;
}
</style>
<div class=container>
  <div class=first-child></div>
</div>

<div class=container>
  <div class=first-child></div>
  <div class=second-child></div>
  <div class=float-child></div>
</div>

<div class=container style="height: 50px">
  <div class=first-child style="width: 150px"></div>
  <div class=float-child></div>
</div>

<div class=container style="height: 50px;">
  <div class=first-child style="margin-left: -10px; width: 160px"></div>
  <div class=float-child></div>
</div>

<div class=container style="height: 50px">
  <div class=first-child style="width: 10px"></div>
  <div class=second-child style="width: 150px"></div>
  <div class=float-child></div>
</div>

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