<div class="content">
  <div class="c-intro-header">
    <h1>Heading text with some more text to wrap around</h1>
    <button class="c-intro-header__btn">Button</button>
    <a href="">Link Link Link</a>
  </div>
</div>
html {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  background: lightgrey;
}
.content {
  background: white;
  padding: 0.5rem 10px;
  max-width: 900px;
  width: 100%;
  display: table;
  margin: auto;
  box-sizing: border-box;
}
.c-intro-header h1 {
  margin: 0;
  padding: 1rem 0;
  line-height: 1.3em;
}
.c-intro-header h1:after{content:"";display:inline-block;height:1px;width:4rem;}
.c-intro-header__btn {
  float: right;
  margin-top: -2.3rem;
}

@media (max-width: 00px) {
  .c-intro-header__btn {
    margin-top: 0;
  }
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.