A B D is regarded as a whole package in one big block, and C is laid out left and right, A B is laid out left and right, and D is laid out in a normal flow. Your current problem is that A B C are all floats, covering a row. Of course D will Start floating again from the second line

float, float. If there is very little space for a floating element on a row, the element will jump to the next row, and this process will continue until a row has enough space.

//css 
.right {
    float:right;
}

.left {
    float:left
}

.row::after{
   content:'';
    clear:both;
}



<p class="row">
    <p class="left">
        <p class="row">
             <p class="left">A</p>
             <p class="right">B</p>
        </p>
        <p>
            D
        </p>
    </p>
    <p class="side right"></p>
</p>

As far as the current situation is concerned, you can float ABC, but you can use relative positioning of D to make it go up... In addition, I think ABC should be able to use inline-block