<div class="demo-header">9) flexbox, on h1</div>
<h1 class="nine">
  Break right after this and
  <span>before this</span>
</h1>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,700);
h1.nine {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  
  span {
    background: black;
    padding: 1px 8px;
  }
}
h1 {
  font-weight: 300;
  font-size: 24px;
  line-height: 1.6;
  background: #eee;
  padding: 20px;
  margin: 5px 0 25px 0;
}
h1 span {
  color: white;
  font-weight: 900;
}
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.