Is it possible to have two divs inside a div, one docked left and one right, such that one shrinks when space is unavailable?

Question

I am making a web application with a panel. Inside this panel I want to have a constant-size button on the left, and some status text on the right. When the window shrinks, I want the text that is docked on the right to shrink to accommodate everything.

Example:

Initial:

[[BUTTON] [Status text]]

When shrunk:

[[BUTTON][Sta...]]

Two ways I know to get this docking are:

• to make the Status text div position: absolute, but this takes it out of the flow and would just make it overlap
• to use floats, but this causes the float:right element to just wrap to the next line when space runs out

I'm looking for a solution that leverages the browser positioning engine as much as possible as opposed to manually calculating things.

Is there a way to do it? Only concerned with modern browsers.

Answer 1

If you need support only modern browsers you can use flexboxes for this. Check this fiddle.

HTML:

<div>
  <button>Button</button>
  <span>Some text here...</span>
</div>

CSS:

div {
  display: flex;
  justify-content: space-between;
}

span {
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}