<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.