Responsive block positioning with fixed and 100% width

Question

css

Good afternoon!
This is not the first time I encounter this problem, but, unfortunately, I could not find a decent solution.
Imagine that we have 2 blocks. The left block has 100% width, as it contains text, which means it should be responsive. The right block has a fixed width, because it contains, for example, a picture.
My wrong decision:

.left {
    width: 100%;
    float: left; /*аналогично и с inline-block*/
}

.right {
     width: 300px;
     float: left; /*аналогично и с inline-block*/
}

With all this, the whole design is obliged to be adaptive (up to mobile resolution, of course).
Thank you!

Answer 1

.left {
    margin-right: 310px;
}
.right {
    width: 300px;
    float: right;
}

But you have to put right before left.
jsfiddle.net/5dDqr
Not sure if this is a good solution.

Answer 2

blog.html.it/layoutgala

Answer 3

I think this solution will be better than with an indent equal to the width of the column.
jsfiddle.net/5dDqr/2