Don't inherit height and width from `table-cell` or `flex` - css

Question

Is there a way to achieve this whilst being responsive?
Right now the button inherits the height from the headline (its width also changes). I'd rather not have to set a fixed height on the button, or put it in a wrapper.
http://jsfiddle.net/frank_o/JfnjY/14/
I've tried with both table:
.container4 {
display: table;
}
.container4 h1, .container4 .button {
display: table-cell;
}
.container4 p {
display: table-row;
}
And flex:
.container1 {
display: flex;
}
.container1 .button {
margin-left: auto;
}
.container1 p {
/* Add something here to make the `p` go below the `h1` */
}
What should I do?

Answer 1

There could be many ways of realizing this layout. Here is one way of doing it.
Consider the following HTML snippets:
<div class="container container1">
<div class="button">Click me</div>
<h1>Table-cell lipsum</h1>
<p>This is how I want it, except the button shouldn't inherit any height.</p>
</div>
<div class="container container2">
<div class="button">Click me</div>
<div class="sub-wrap">
<h1>Table-cell lipsum</h1>
<p>This is how I want it, except the button shouldn't inherit any
height. Morbi consequat, purus nec suscipit luctus...</p>
</div>
</div>
and the following CSS:
.container {
border: 2px solid red;
margin: 20px;
}
.button {
padding: 5px 17px;
border: 2px solid;
display: inline-block;
white-space: nowrap;
float: right;
}
.container1 h1 {
background-color: beige;
overflow: auto;
margin: 0;
}
.container1 p {
background-color: pink;
}
.container2 .sub-wrap {
overflow: auto;
background-color: lightblue;
}
In both cases, I floated the button to the right and used display: inline-block to keep a shrink to fit width/height, and white-space: nowrap to keep the text on a single line.
In the first case, .container1, I used overflow: auto on h1 to keep the text from interfering with the button. The p will just be in normal flow below the title and button.
In the second case, .container2, I wrapped the title and paragraph in a block level element .sub-wrap which has overflow: auto, that way neither the paragraph nor the title wrap around the button.
See demo at: http://jsfiddle.net/audetwebdesign/Dap4M/

Answer 2

DEMO
You can keep the table-cell property but don't apply it directly on button class, instead make a wrap with table-cell & then define your button this way button wont have to apply full height!
HTML:
<div class="container container4">
<h1>Table-cell lipsum</h1>
<div class="button-wrap">
<div class="button">Click me</div>
</div>
<p>This is how I want it, except the button shouldn't inherit any height.</p>
</div>
CSS:
.container4 h1, .container4 .button-wrap {
display: table-cell;
vertical-align: top;
}
It's a good practice to keep the layout classes separate from the actual elements classes.