I have the following HTML:

```
<div>
    <button>b1</button> 
    <button>b1</button> 
    <button>b1</button> 
    <span>Heading</span>
    <span>Status</span>
</div>

```

When the div is this wide I would like this to be displayed like this:

```
|-------------------------------------------|
| b1 b2 b3         Heading           Status |
|-------------------------------------------|

```

When the div is this wide I would like things to be displayed like this:

```
|----------------------------------------------------------------------------------|
| b1 b2 b3                        Heading                                   Status |
|----------------------------------------------------------------------------------|

```

When the div is too narrow to accommodate everything, something reasonable should happen. 

```
|--------------------------|
|          Heading         | 
| b1 b2 b3          Status | 
|--------------------------|

```

Summary of requirements:

* 3 buttons are aligned to the left
* Heading is centered
* Status is aligned to the left
* When the div is too narrow to accommodate all three things, the heading should appear on a separate line before the other things (other reasonable behaviour would also be fine).

What is the best way to implement this kind of layout?