Keep element on one line, below the float if necessary - css

Question

I have got a horizontal line of divs that I would like to keep together, and there is a floating element to the right. When the float overlaps the line of divs, at the moment it breaks the divs into two lines. What I would like to happen would be for the line of divs to move below the float, similar to how the word "Heading" moves to below the float when there is not enough space.
I have tried white-space: no-wrap, but this does not cause the div to move vertically, it only places it behind the float. I have also tried clear: right, but this moves it down even when the boxes would fit further up.
Example (resizable box):
h2 {
margin: 0;
}
.outer {
border: solid;
resize: horizontal;
overflow-x: auto;
padding-bottom: 20px;
}
.right {
float: right;
width: 100px;
height: 50px;
background: red;
}
.pair {
/* white-space: nowrap; */
}
.pair > * {
display: inline-block;
padding: 2px;
margin: 0 2px;
background: lightGreen;
}
<div class="outer">
<div class="right"></div>
<h2>A Heading</h2>
<div class="pair">
<div>This is a box</div>
<div>This is a wide box</div>
</div>
</div>

Answer 1

You should make the pair element to be inline-block because by default a block element will get overlapped by a floated element unlike inline level element that will wrap around floated element.
The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it.ref
h2 {
margin: 0;
}
.outer {
border: solid;
resize: horizontal;
overflow-x: auto;
padding-bottom: 20px;
}
.right {
float: right;
width: 100px;
height: 50px;
background: red;
}
.pair {
/*white-space: nowrap; not needed*/
display:inline-block;
}
.pair > * {
display: inline-block;
margin: 0 2px;
padding: 2px;
background: lightGreen;
}
<div class="outer">
<div class="right"></div>
<h2>A Heading</h2>
<div class="pair">
<div>This is a box</div>
<div>This is a wide box</div>
</div>
</div>