I am dealing with a row of horizontal divs that I want to keep together, but a floating element on the right side is causing them to break into two lines when it overlaps. My goal is to have the line of divs move below the float, similar to how the word "Heading" shifts down when space is limited.
I attempted using white-space: no-wrap, but this only places the div behind the float without changing its vertical position. Additionally, I tried clear: right, but this ends up shifting the div downwards even if there is enough room for the boxes to remain higher up.
Example (resize 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>