Centering text to outer div without overlaping other divs - html

Question

We have outer div header which has 100% width of its container. The div is for heading text and button on right. The text have to be centered to the header and the button has to be on right. But if the text is long enough to overlap with button, then the text should fill left part of header and do not go on button.
header -> [ [CENTER TEXT] [button]]
OR (with wider CENTER TEXT)
header -> [[abcdabcdab CENTER TEXT cd][button]]
Tried with position: relative on header->text and position: absolute; left: 100%; on button when placing it as a child of center text. But this isn't exactly what is should look like. Any good way to do it with pure CSS?
Button should be placed with little margin to right border of header, rather not with margin to center text.

Answer 1

You can use this simple trick:
Use a span positioned inline after the text itself. Once the text is longer than the size of the header, the span drops a to the next line and the text can take all the space.
Notice that you need to set a fixed width to the button.
div.container {
border: 1px solid red;
height: 50px;
width: 100%;
position: relative;
}
h1 {
background: gray;
width: calc(100% - 100px);
float: left;
height: 50px;
line-height: 50px;
text-align: center;
margin: 0;
direction: rtl;
}
h1 span.text {
color: black;
background: lightyellow;
direction: ltr;
}
h1 span.padding-holder {
width: 100px;
display: inline-block;
position: relative;
}
button {
float: right;
width: 100px;
height: 50px;
}
<div class="container">
<h1>
<span class="text">Short Header</span>
<span class="padding-holder"></span>
</h1>
<button>Click Me</button>
</div>
<div class="container">
<h1>
<span class="text">Now a Medium Header</span>
<span class="padding-holder"></span>
</h1>
<button>Click Me</button>
</div>
<div class="container">
<h1>
<span class="text">And This is a Very Long Header</span>
<span class="padding-holder"></span>
</h1>
<button>Click Me</button>
</div>